CommunityRule/community-rule
2
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity
Files
1ff5d13d2ecee93b9f94602a75e6dff18ce61a17
community-rule/docs/assets/Footer.stories-DFwAxlXr.js
T
adilallo e871c9de4b Replace absolute image paths
2025-08-20 12:30:59 -06:00

46 lines
11 KiB
JavaScript
Raw Blame History

import{j as e}from"./jsx-runtime-C_nHp4yK.js";import{L as o}from"./Logo-DM7O8ATg.js";import"./iframe-D_aMTKb2.js";import"./preload-helper-DIZFD4sK.js";function n(){return e.jsx("div",{className:"flex flex-col items-center self-stretch",children:e.jsx("div",{className:"flex items-start self-stretch h-px w-full bg-[var(--border-color-default-secondary)]"})})}n.__docgenInfo={description:"",methods:[],displayName:"Separator"};function r(){const a={"@context":"https://schema.org","@type":"Organization",name:"Media Economies Design Lab",email:"medlab@colorado.edu",url:"https://communityrule.com",sameAs:["https://bsky.app/profile/medlabboulder","https://gitlab.com/medlabboulder"]};return e.jsxs(e.Fragment,{children:[e.jsx("script",{type:"application/ld+json",dangerouslySetInnerHTML:{__html:JSON.stringify(a)}}),e.jsx("footer",{className:"bg-[var(--color-surface-default-primary)] w-full",children:e.jsxs("div",{className:"flex flex-col items-start mx-auto px-[var(--spacing-measures-spacing-016)] py-[var(--spacing-measures-spacing-040)] gap-[var(--spacing-measures-spacing-040)] sm:px-[var(--spacing-measures-spacing-032)] sm:py-[var(--spacing-measures-spacing-024)] sm:gap-[var(--spacing-measures-spacing-024)] lg:px-[var(--spacing-measures-spacing-120,120px)] lg:py-[var(--spacing-measures-spacing-096,96px)] lg:gap-[var(--spacing-measures-spacing-060,60px)]",children:[e.jsx("div",{className:"block sm:hidden",children:e.jsx(o,{})}),e.jsx("div",{className:"hidden sm:block lg:hidden",children:e.jsx(o,{size:"footer"})}),e.jsx("div",{className:"hidden lg:block",children:e.jsx(o,{size:"footerLg"})}),e.jsxs("div",{className:"flex flex-col items-start w-full gap-[var(--spacing-measures-spacing-048,48px)] sm:flex-row sm:justify-between sm:gap-0",children:[e.jsxs("div",{className:"flex flex-col items-start gap-[var(--spacing-measures-spacing-064,64px)] order-2 sm:order-1",children:[e.jsxs("div",{className:"flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]",children:[e.jsx("div",{className:"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal",children:"Media Economies Design Lab"}),e.jsx("a",{href:"mailto:medlab@colorado.edu",className:"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",children:"medlab@colorado.edu"})]}),e.jsxs("div",{className:"flex flex-col items-start gap-[var(--spacing-measures-spacing-016,16px)]",children:[e.jsxs("a",{href:"#",className:"flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group","aria-label":"Follow us on Bluesky",children:[e.jsx("img",{src:"assets/Bluesky_Logo.svg",alt:"Bluesky",width:24,height:22,className:"flex-shrink-0 group-hover:scale-110 transition-transform"}),e.jsx("div",{className:"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal",children:"medlabboulder"})]}),e.jsxs("a",{href:"#",className:"flex items-center gap-[var(--spacing-measures-spacing-06,6px)] hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer group","aria-label":"Follow us on GitLab",children:[e.jsx("img",{src:"assets/GitLab_Icon.png",alt:"GitLab",width:22,height:22,className:"flex-shrink-0 grayscale group-hover:scale-110 transition-transform"}),e.jsx("div",{className:"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal",children:"medlabboulder"})]})]})]}),e.jsxs("div",{className:"flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] order-1 sm:order-2 sm:items-end",children:[e.jsx("a",{href:"#",className:"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",children:"Use cases"}),e.jsx("a",{href:"#",className:"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",children:"Learn"}),e.jsx("a",{href:"#",className:"text-[var(--color-content-default-primary)] font-['Inter'] text-base leading-5 font-medium tracking-[0%] lg:text-2xl lg:leading-7 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-primary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",children:"About"})]})]}),e.jsx(n,{}),e.jsxs("div",{className:"flex flex-col items-start gap-[var(--spacing-measures-spacing-032,32px)] sm:flex-row sm:justify-between sm:items-center w-full",children:[e.jsx("div",{className:"text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium sm:text-xs sm:leading-4 lg:text-sm lg:leading-5 lg:font-normal",children:"© All right reserved"}),e.jsxs("div",{className:"flex flex-col items-start gap-[var(--spacing-measures-spacing-040,40px)] sm:flex-row sm:gap-[var(--spacing-measures-spacing-040,40px)]",children:[e.jsx("a",{href:"#",className:"text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",children:"Privacy Policy"}),e.jsx("a",{href:"#",className:"text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",children:"Terms of Service"}),e.jsx("a",{href:"#",className:"text-[var(--color-content-default-secondary)] font-['Inter'] text-sm leading-5 font-medium underline sm:text-xs sm:leading-4 sm:no-underline lg:text-sm lg:leading-5 lg:font-normal hover:opacity-80 active:opacity-60 focus:opacity-80 focus:outline-none focus:ring-2 focus:ring-[var(--color-content-default-secondary)] focus:ring-offset-2 focus:ring-offset-[var(--color-surface-default-primary)] transition-opacity p-2 -m-2 cursor-pointer",children:"Cookies Settings"})]})]})]})})]})}r.__docgenInfo={description:"",methods:[],displayName:"Footer"};const d={title:"Components/Footer",component:r,parameters:{layout:"fullscreen",docs:{description:{component:"The main footer with responsive layout, branding section, navigation links, and legal information. Features different logo sizes and layout changes across breakpoints."}}},tags:["autodocs"]},s={args:{},parameters:{docs:{description:{story:"Use the Viewport toolbar to see how the footer adapts to different screen sizes. The layout changes from stacked to side-by-side and logo sizes adjust."}}}},t={args:{},render:()=>e.jsxs("div",{className:"min-h-screen bg-[var(--color-surface-default-primary)]",children:[e.jsx("main",{className:"p-8",children:e.jsxs("div",{className:"max-w-4xl mx-auto",children:[e.jsx("h1",{className:"text-2xl font-bold text-white mb-4",children:"Example Page Content"}),e.jsx("p",{className:"text-white mb-4",children:"This demonstrates how the footer looks in a realistic page context. The footer maintains its responsive behavior while providing navigation and branding information."}),e.jsx("div",{className:"grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4",children:[1,2,3,4,5,6].map(a=>e.jsxs("div",{className:"bg-[var(--color-surface-default-secondary)] p-4 rounded-lg",children:[e.jsxs("h3",{className:"text-white font-semibold mb-2",children:["Content Block ",a]}),e.jsx("p",{className:"text-[var(--color-content-default-secondary)] text-sm",children:"This is example content to show how the footer integrates with page content."})]},a))})]})}),e.jsx(r,{})]}),parameters:{docs:{description:{story:"The footer integrated into a full page layout to show how it works in context."}}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
args: {},
parameters: {
docs: {
description: {
story: "Use the Viewport toolbar to see how the footer adapts to different screen sizes. The layout changes from stacked to side-by-side and logo sizes adjust."
}
}
}
}`,...s.parameters?.docs?.source}}};t.parameters={...t.parameters,docs:{...t.parameters?.docs,source:{originalSource:`{
args: {},
render: () => <div className="min-h-screen bg-[var(--color-surface-default-primary)]">
<main className="p-8">
<div className="max-w-4xl mx-auto">
<h1 className="text-2xl font-bold text-white mb-4">
Example Page Content
</h1>
<p className="text-white mb-4">
This demonstrates how the footer looks in a realistic page context.
The footer maintains its responsive behavior while providing
navigation and branding information.
</p>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
{[1, 2, 3, 4, 5, 6].map(i => <div key={i} className="bg-[var(--color-surface-default-secondary)] p-4 rounded-lg">
<h3 className="text-white font-semibold mb-2">
Content Block {i}
</h3>
<p className="text-[var(--color-content-default-secondary)] text-sm">
This is example content to show how the footer integrates with
page content.
</p>
</div>)}
</div>
</div>
</main>
<Footer />
</div>,
parameters: {
docs: {
description: {
story: "The footer integrated into a full page layout to show how it works in context."
}
}
}
}`,...t.parameters?.docs?.source}}};const f=["Default","InPageContext"];export{s as Default,t as InPageContext,f as __namedExportsOrder,d as default};
Reference in New Issue View Git Blame Copy Permalink