refactor: use logos-brand-guidelines-theme, remove scripts and move sidebar config to the docs dir
This commit is contained in:
Hossein Mehrabi
parent
3b349b1dff
commit
d53b991fd7
|
|
@ -1,6 +1,8 @@
|
|||
---
|
||||
title: Gallery
|
||||
displayed_sidebar: main
|
||||
sidebar_position: 2
|
||||
sidebar_class_name: sidebar-menu-divider
|
||||
---
|
||||
|
||||
import { ImageGrid, Grid } from "@site/src/components/mdx"
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
---
|
||||
title: Brand Guidelines
|
||||
displayed_sidebar: main
|
||||
sidebar_position: 0
|
||||
---
|
||||
|
||||
# Brand guidelines
|
||||
|
|
|
|||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"position": 5,
|
||||
"label": "LSD - UI Library",
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"title": "Title"
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
title: Autocomplete
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Autocomplete
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Badge
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Badge
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Breadcrumb
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Breadcrumb
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Button
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Button
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: ButtonGroup
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# ButtonGroup
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Card
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Card
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Checkbox
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Checkbox
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: CheckboxGroup
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# CheckboxGroup
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Collapse
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Collapse
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: DateField
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# DateField
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: DatePicker
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# DatePicker
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: DateRangePicker
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# DateRangePicker
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Dropdown
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Dropdown
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: IconButton
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# IconButton
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: IconButtonGroup
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# IconButtonGroup
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Modal
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Modal
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: NumberInput
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# NumberInput
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Quote
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Quote
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: RadioButton
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# RadioButton
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: RadioButtonGroup
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# RadioButtonGroup
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Table
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Table
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Tabs
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Tabs
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Tag
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Tag
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: TextField
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# TextField
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: ThemeProvider
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# ThemeProvider
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Toast
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Toast
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: ToastProvider
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# ToastProvider
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Typography
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Typography
|
||||
|
||||
|
|
|
|||
|
|
@ -10,111 +10,111 @@ import { ComponentGrid } from '@site/src/components/mdx';
|
|||
{
|
||||
"title": "Autocomplete",
|
||||
"href": "./Autocomplete",
|
||||
"imageSrc": "/img/components/Autocomplete.png"
|
||||
"imageSrc": "/lsd/Autocomplete.png"
|
||||
},
|
||||
{
|
||||
"title": "Breadcrumb",
|
||||
"href": "./Breadcrumb",
|
||||
"imageSrc": "/img/components/Breadcrumb.png"
|
||||
"imageSrc": "/lsd/Breadcrumb.png"
|
||||
},
|
||||
{
|
||||
"title": "Button",
|
||||
"href": "./Button",
|
||||
"imageSrc": "/img/components/Button.png"
|
||||
"imageSrc": "/lsd/Button.png"
|
||||
},
|
||||
{
|
||||
"title": "ButtonGroup",
|
||||
"href": "./ButtonGroup",
|
||||
"imageSrc": "/img/components/ButtonGroup.png"
|
||||
"imageSrc": "/lsd/ButtonGroup.png"
|
||||
},
|
||||
{
|
||||
"title": "Card",
|
||||
"href": "./Card",
|
||||
"imageSrc": "/img/components/Card.png"
|
||||
"imageSrc": "/lsd/Card.png"
|
||||
},
|
||||
{
|
||||
"title": "Checkbox",
|
||||
"href": "./Checkbox",
|
||||
"imageSrc": "/img/components/Checkbox.png"
|
||||
"imageSrc": "/lsd/Checkbox.png"
|
||||
},
|
||||
{
|
||||
"title": "CheckboxGroup",
|
||||
"href": "./CheckboxGroup",
|
||||
"imageSrc": "/img/components/CheckboxGroup.png"
|
||||
"imageSrc": "/lsd/CheckboxGroup.png"
|
||||
},
|
||||
{
|
||||
"title": "Collapse",
|
||||
"href": "./Collapse",
|
||||
"imageSrc": "/img/components/Collapse.png"
|
||||
"imageSrc": "/lsd/Collapse.png"
|
||||
},
|
||||
{
|
||||
"title": "DateField",
|
||||
"href": "./DateField",
|
||||
"imageSrc": "/img/components/DateField.png"
|
||||
"imageSrc": "/lsd/DateField.png"
|
||||
},
|
||||
{
|
||||
"title": "DatePicker",
|
||||
"href": "./DatePicker",
|
||||
"imageSrc": "/img/components/DatePicker.png"
|
||||
"imageSrc": "/lsd/DatePicker.png"
|
||||
},
|
||||
{
|
||||
"title": "DateRangePicker",
|
||||
"href": "./DateRangePicker",
|
||||
"imageSrc": "/img/components/DateRangePicker.png"
|
||||
"imageSrc": "/lsd/DateRangePicker.png"
|
||||
},
|
||||
{
|
||||
"title": "Dropdown",
|
||||
"href": "./Dropdown",
|
||||
"imageSrc": "/img/components/Dropdown.png"
|
||||
"imageSrc": "/lsd/Dropdown.png"
|
||||
},
|
||||
{
|
||||
"title": "IconButton",
|
||||
"href": "./IconButton",
|
||||
"imageSrc": "/img/components/IconButton.png"
|
||||
"imageSrc": "/lsd/IconButton.png"
|
||||
},
|
||||
{
|
||||
"title": "Modal",
|
||||
"href": "./Modal",
|
||||
"imageSrc": "/img/components/Modal.png"
|
||||
"imageSrc": "/lsd/Modal.png"
|
||||
},
|
||||
{
|
||||
"title": "NumberInput",
|
||||
"href": "./NumberInput",
|
||||
"imageSrc": "/img/components/NumberInput.png"
|
||||
"imageSrc": "/lsd/NumberInput.png"
|
||||
},
|
||||
{
|
||||
"title": "Quote",
|
||||
"href": "./Quote",
|
||||
"imageSrc": "/img/components/Quote.png"
|
||||
"imageSrc": "/lsd/Quote.png"
|
||||
},
|
||||
{
|
||||
"title": "RadioButton",
|
||||
"href": "./RadioButton",
|
||||
"imageSrc": "/img/components/RadioButton.png"
|
||||
"imageSrc": "/lsd/RadioButton.png"
|
||||
},
|
||||
{
|
||||
"title": "RadioButtonGroup",
|
||||
"href": "./RadioButtonGroup",
|
||||
"imageSrc": "/img/components/RadioButtonGroup.png"
|
||||
"imageSrc": "/lsd/RadioButtonGroup.png"
|
||||
},
|
||||
{
|
||||
"title": "Tabs",
|
||||
"href": "./Tabs",
|
||||
"imageSrc": "/img/components/Tabs.png"
|
||||
"imageSrc": "/lsd/Tabs.png"
|
||||
},
|
||||
{
|
||||
"title": "Tag",
|
||||
"href": "./Tag",
|
||||
"imageSrc": "/img/components/Tag.png"
|
||||
"imageSrc": "/lsd/Tag.png"
|
||||
},
|
||||
{
|
||||
"title": "TextField",
|
||||
"href": "./TextField",
|
||||
"imageSrc": "/img/components/TextField.png"
|
||||
"imageSrc": "/lsd/TextField.png"
|
||||
},
|
||||
{
|
||||
"title": "Toast",
|
||||
"href": "./Toast",
|
||||
"imageSrc": "/img/components/Toast.png"
|
||||
"imageSrc": "/lsd/Toast.png"
|
||||
}
|
||||
]} />
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Colors
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Colors
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Spacing
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Spacing
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
title: Typography
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Typography
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"label": "Design Tokens",
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"title": "Design Tokens"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: Overview
|
||||
displayed_sidebar: main
|
||||
pagination_label: LSD - UI Library
|
||||
sidebar_position: 0
|
||||
---
|
||||
|
||||
import { ExternalResourceCard, Grid } from '@site/src/components/mdx';
|
||||
|
|
@ -1,4 +1,6 @@
|
|||
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Philosophy
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"position": "5",
|
||||
"label": "Templates",
|
||||
"link": {
|
||||
"type": "generated-index"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
|
||||
# Social media assets
|
||||
|
||||
import { ExternalResourceCard, Grid } from '@site/src/components/mdx';
|
||||
import { ExternalResourceCard, Grid, Box } from '@site/src/components/mdx';
|
||||
|
||||
<Grid xs={{ cols: 1, wrap: true, gap: '16px' }} md={{ cols: 2 }}>
|
||||
<Grid.Item xs={1}>
|
||||
<div className="template-card-title">Network State Press templates</div>
|
||||
<Box top={40} bottom={24}>Network State Press templates</Box>
|
||||
<ExternalResourceCard
|
||||
title="Logos templates"
|
||||
description="www.figma.com"
|
||||
|
|
@ -14,7 +14,7 @@ import { ExternalResourceCard, Grid } from '@site/src/components/mdx';
|
|||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item xs={1}>
|
||||
<div className="template-card-title">Tweet templates</div>
|
||||
<Box top={40} bottom={24}>Tweet templates</Box>
|
||||
<ExternalResourceCard
|
||||
title="Logos templates"
|
||||
description="www.figma.com"
|
||||
|
|
@ -23,7 +23,7 @@ import { ExternalResourceCard, Grid } from '@site/src/components/mdx';
|
|||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item xs={1}>
|
||||
<div className="template-card-title">Logos podcast templates</div>
|
||||
<Box top={40} bottom={24}>Logos podcast templates</Box>
|
||||
<ExternalResourceCard
|
||||
title="Logos templates"
|
||||
description="www.figma.com"
|
||||
|
|
@ -32,7 +32,7 @@ import { ExternalResourceCard, Grid } from '@site/src/components/mdx';
|
|||
/>
|
||||
</Grid.Item>
|
||||
<Grid.Item xs={1}>
|
||||
<div className="template-card-title">Hashing It Out templates</div>
|
||||
<Box top={40} bottom={24}>Hashing It Out templates</Box>
|
||||
<ExternalResourceCard
|
||||
title="Logos templates"
|
||||
description="www.figma.com"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"position": 4,
|
||||
"label": "Visual Language",
|
||||
"link": {
|
||||
"type": "generated-index"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
---
|
||||
title: Color
|
||||
sidebar_position: 3
|
||||
sidebar_position: 2
|
||||
displayed_sidebar: main
|
||||
---
|
||||
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"position": 4,
|
||||
"label": "Grid and Layout"
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Non-web Environment
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
import { ImageGrid, Grid } from '@site/src/components/mdx'
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Grid and Layout
|
||||
title: Overview
|
||||
sidebar_position: 0
|
||||
---
|
||||
|
||||
import DocCardList from '@theme/DocCardList';
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Web Environment
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,8 @@
|
|||
---
|
||||
title: Illustration
|
||||
sidebar_position: 5
|
||||
displayed_sidebar: main
|
||||
displayed_sidebar: null
|
||||
sidebar_class_name: hidden
|
||||
---
|
||||
|
||||
import { ImageGrid } from "@site/src/components/mdx"
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: Logo
|
||||
sidebar_position: 2
|
||||
displayed_sidebar: main
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
import { AssetCard } from '@site/src/components/mdx';
|
||||
|
|
|
|||
|
|
@ -1,7 +1,6 @@
|
|||
---
|
||||
title: Visual Language
|
||||
sidebar_position: 1
|
||||
displayed_sidebar: main
|
||||
title: Overview
|
||||
sidebar_position: 0
|
||||
---
|
||||
|
||||
# Overview
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
---
|
||||
title: Photography
|
||||
sidebar_position: 4
|
||||
displayed_sidebar: main
|
||||
title: Photography
|
||||
displayed_sidebar: null
|
||||
sidebar_class_name: hidden
|
||||
---
|
||||
|
||||
import { ImageGrid, Grid } from "@site/src/components/mdx"
|
||||
import { ImageGrid } from "@site/src/components/mdx"
|
||||
|
||||
export const portraits = [
|
||||
{ src: "/photography/Logos-Photography-01.png", img: require("/photography/Logos-Photography-01.png") },
|
||||
|
|
|
|||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"position": 3,
|
||||
"label": "Typography"
|
||||
}
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Non-web environments
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Non-web environments
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
title: Typography
|
||||
title: Overview
|
||||
sidebar_position: 0
|
||||
---
|
||||
|
||||
import DocCardList from '@theme/DocCardList';
|
||||
|
|
@ -1,8 +1,9 @@
|
|||
---
|
||||
title: Web Environments
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';
|
||||
import { StorybookDemo } from '@site/src/components/mdx';
|
||||
|
||||
# Web Environments
|
||||
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@
|
|||
title: Voice
|
||||
displayed_sidebar: main
|
||||
pagination_label: Voice
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
|
|
|||
|
|
@ -65,6 +65,49 @@ const config = {
|
|||
],
|
||||
],
|
||||
|
||||
themes: [
|
||||
[
|
||||
'@acid-info/logos-docusaurus-brand-guidelines-theme',
|
||||
/** @type {import('@acid-info/logos-docusaurus-brand-guidelines-theme').ThemeOptions} */
|
||||
({
|
||||
customCss: [],
|
||||
lsdDocs: {
|
||||
storybookUrl: process.env.STORYBOOK_URL,
|
||||
componentsDirectory: 'docs/lsd/components',
|
||||
designTokensDirectory: 'docs/lsd/design-tokens',
|
||||
componentConfig: {
|
||||
Colors: {
|
||||
globalProps: ['themeColor'],
|
||||
},
|
||||
Typography: {
|
||||
globalProps: ['themeFont'],
|
||||
},
|
||||
Spacing: {
|
||||
globalProps: [],
|
||||
},
|
||||
},
|
||||
excludeComponents: [
|
||||
'BreadcrumbItem',
|
||||
'CardBody',
|
||||
'CardHeader',
|
||||
'CollapseHeader',
|
||||
'DropdownItem',
|
||||
'ModalBody',
|
||||
'ModalFooter',
|
||||
'TabItem',
|
||||
'TableItem',
|
||||
'TableRow',
|
||||
'Calendar',
|
||||
'TableBody',
|
||||
'TableHeader',
|
||||
'TooltipBase',
|
||||
],
|
||||
staticDirectory: 'lsd',
|
||||
},
|
||||
}),
|
||||
],
|
||||
],
|
||||
|
||||
themeConfig:
|
||||
/** @type {import('@acid-info/logos-docusaurus-preset').ThemeConfig} */
|
||||
({
|
||||
|
|
|
|||
|
|
@ -6,19 +6,16 @@
|
|||
"docusaurus": "docusaurus",
|
||||
"start": "docusaurus start",
|
||||
"build": "docusaurus build",
|
||||
"prestart": "yarn run script:download-data",
|
||||
"prebuild": "yarn run script:download-data",
|
||||
"swizzle": "docusaurus swizzle",
|
||||
"deploy": "docusaurus deploy",
|
||||
"clear": "docusaurus clear",
|
||||
"serve": "docusaurus serve",
|
||||
"write-translations": "docusaurus write-translations",
|
||||
"write-heading-ids": "docusaurus write-heading-ids",
|
||||
"typecheck": "tsc",
|
||||
"script": "node -r dotenv/config -r tsconfig-paths/register -r ts-node/register scripts/",
|
||||
"script:download-data": "yarn run script ./scripts/download-storybook-data.ts"
|
||||
"typecheck": "tsc"
|
||||
},
|
||||
"dependencies": {
|
||||
"@acid-info/logos-docusaurus-brand-guidelines-theme": "^1.0.0-alpha.123",
|
||||
"@acid-info/logos-docusaurus-preset": "^1.0.0-alpha.121",
|
||||
"@docusaurus/plugin-ideal-image": "2.4.1",
|
||||
"@emotion/react": "^11.11.0",
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
import * as path from 'path'
|
||||
|
||||
export const DATA_DIR = path.join(__dirname, '../data')
|
||||
|
|
@ -1,161 +0,0 @@
|
|||
import * as fs from 'fs'
|
||||
import * as fsp from 'fs/promises'
|
||||
import fetch from 'node-fetch'
|
||||
import * as path from 'path'
|
||||
import { URL } from 'url'
|
||||
import type { ComponentGridProps, GlobalControls } from '../src/components/mdx'
|
||||
import { DATA_DIR } from './config'
|
||||
|
||||
const EXCLUDE_COMPONENTS = [
|
||||
'BreadcrumbItem',
|
||||
'CardBody',
|
||||
'CardHeader',
|
||||
'CollapseHeader',
|
||||
'DropdownItem',
|
||||
'ModalBody',
|
||||
'ModalFooter',
|
||||
'TabItem',
|
||||
'TableItem',
|
||||
'TableRow',
|
||||
'Calendar',
|
||||
'TableBody',
|
||||
'TableHeader',
|
||||
'TooltipBase',
|
||||
]
|
||||
|
||||
const STORYBOOK_URL = process.env.STORYBOOK_URL
|
||||
const DOCS_DIR = path.join(DATA_DIR, '../docs')
|
||||
const LSD_DOCS_DIR = path.join(DOCS_DIR, './lsd')
|
||||
const COMPONENTS_DIR = path.join(LSD_DOCS_DIR, './components')
|
||||
const DESIGN_TOKENS_DIR = path.join(LSD_DOCS_DIR, './design-tokens')
|
||||
|
||||
const getGlobalControls = (story): GlobalControls[] => {
|
||||
if(story.name === 'Colors') {
|
||||
return ["themeColor"]
|
||||
} else if(story.name === 'Typography') {
|
||||
return ["themeFont"]
|
||||
} else if(story.name === 'Spacing') {
|
||||
// On the spacing page, there's no need for a themeColor or themeFont dropdown
|
||||
return []
|
||||
}
|
||||
|
||||
return ["themeColor", "themeFont"]
|
||||
}
|
||||
|
||||
const generateDocs = async (metadata: any) => {
|
||||
const componentsDir = path.join(DATA_DIR, './components')
|
||||
const designTokensDir = path.join(DATA_DIR, './design-tokens')
|
||||
|
||||
if (fs.existsSync(componentsDir))
|
||||
await fsp.rm(componentsDir, { recursive: true })
|
||||
|
||||
if (fs.existsSync(designTokensDir))
|
||||
await fsp.rm(designTokensDir, { recursive: true })
|
||||
|
||||
await fsp.mkdir(componentsDir)
|
||||
await fsp.mkdir(designTokensDir)
|
||||
|
||||
await fsp.mkdir(LSD_DOCS_DIR, {
|
||||
recursive: true,
|
||||
})
|
||||
|
||||
const components = metadata.components.filter(
|
||||
component => !EXCLUDE_COMPONENTS.includes(component.name),
|
||||
)
|
||||
|
||||
for (const component of components) {
|
||||
const story =
|
||||
component.stories.find(s => s.name === 'Root') || component.stories[0]
|
||||
const storyId = story.id
|
||||
|
||||
let doc = ''
|
||||
doc += `---\ntitle: ${component.name}\n---\n\n`
|
||||
doc += `import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';\n\n`
|
||||
doc += `# ${component.component.title}\n\n`
|
||||
doc += `<StorybookDemo name="${
|
||||
component.name
|
||||
}" storybookUrl="${STORYBOOK_URL}" docId="${storyId.replace(
|
||||
'--root',
|
||||
'--docs',
|
||||
)}" globalTypes={{}} componentProperties={[]} />\n`
|
||||
|
||||
await fsp.writeFile(path.join(componentsDir, `${component.name}.mdx`), doc)
|
||||
}
|
||||
|
||||
{
|
||||
const themeProvider = components.find(comp => comp.name === 'ThemeProvider')
|
||||
|
||||
const root = themeProvider.stories.find(story => story.name === 'Root')
|
||||
const stories = themeProvider.stories.filter(story => story !== root)
|
||||
for (const story of stories) {
|
||||
let doc = ''
|
||||
const globalControls = getGlobalControls(story)
|
||||
const globalControlsString = JSON.stringify(globalControls)
|
||||
|
||||
doc += `---\ntitle: ${story.name}\n---\n\n`
|
||||
doc += `import { StorybookDemo } from '@site/src/components/mdx/StorybookDemo';\n\n`
|
||||
doc += `# ${story.name}\n\n`
|
||||
doc += `<StorybookDemo name="${story.name}" docId="${root.id.replace(
|
||||
'--root',
|
||||
'--docs',
|
||||
)}" storybookUrl="${STORYBOOK_URL}" storyId="${
|
||||
story.id
|
||||
}" globalTypes={{}} componentProperties={[]} globalControls={${globalControlsString}}/>\n`
|
||||
|
||||
await fsp.writeFile(path.join(designTokensDir, `${story.name}.mdx`), doc)
|
||||
}
|
||||
}
|
||||
|
||||
if (fs.existsSync(COMPONENTS_DIR))
|
||||
await fsp.rm(COMPONENTS_DIR, { recursive: true })
|
||||
|
||||
if (fs.existsSync(DESIGN_TOKENS_DIR))
|
||||
await fsp.rm(DESIGN_TOKENS_DIR, { recursive: true })
|
||||
|
||||
await fsp.rename(componentsDir, COMPONENTS_DIR)
|
||||
await fsp.rename(designTokensDir, DESIGN_TOKENS_DIR)
|
||||
|
||||
{
|
||||
// components index page
|
||||
|
||||
let doc = ''
|
||||
doc += `---\ntitle: Components\n---\n\n`
|
||||
doc += `import { ComponentGrid } from '@site/src/components/mdx';\n\n`
|
||||
doc += `# Components\n\n`
|
||||
|
||||
const list: ComponentGridProps['list'] = []
|
||||
|
||||
for (const component of components) {
|
||||
const { name } = component
|
||||
|
||||
const imagePath = path.join(
|
||||
DATA_DIR,
|
||||
`../static/img/components/${name}.png`,
|
||||
)
|
||||
|
||||
if (fs.existsSync(imagePath)) {
|
||||
list.push({
|
||||
title: name,
|
||||
href: `./${name}`,
|
||||
imageSrc: `/img/components/${name}.png`,
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
doc += `<ComponentGrid list={${JSON.stringify(list, null, 2)}} />\n`
|
||||
|
||||
await fsp.writeFile(path.join(COMPONENTS_DIR, `index.mdx`), doc)
|
||||
}
|
||||
}
|
||||
|
||||
export const run = async () => {
|
||||
const metadataUrl = new URL('/_metadata.json', STORYBOOK_URL)
|
||||
const response = await (await fetch(metadataUrl.toString())).json()
|
||||
|
||||
await fsp.writeFile(
|
||||
path.join(__dirname, '../data', 'storybook.metadata.json'),
|
||||
JSON.stringify(response),
|
||||
)
|
||||
|
||||
await generateDocs(response)
|
||||
}
|
||||
|
|
@ -1,33 +0,0 @@
|
|||
import * as fs from 'fs'
|
||||
import * as fsp from 'fs/promises'
|
||||
import path from 'path'
|
||||
import { DATA_DIR } from './config'
|
||||
|
||||
const main = async () => {
|
||||
console.time()
|
||||
|
||||
if (!fs.existsSync(DATA_DIR)) {
|
||||
await fsp.mkdir(DATA_DIR)
|
||||
}
|
||||
|
||||
const [, , ...filenames] = process.argv
|
||||
|
||||
for (const filename of filenames) {
|
||||
console.time(filename)
|
||||
const { run } = await import(path.join(process.cwd(), filename))
|
||||
await run()
|
||||
|
||||
console.timeEnd(filename)
|
||||
}
|
||||
|
||||
console.timeEnd()
|
||||
}
|
||||
|
||||
main()
|
||||
.then(() => {
|
||||
process.exit(0)
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error)
|
||||
process.exit(1)
|
||||
})
|
||||
165
sidebars.js
165
sidebars.js
|
|
@ -2,170 +2,9 @@
|
|||
/** @type {import('@docusaurus/plugin-content-docs').SidebarsConfig} */
|
||||
const sidebars = {
|
||||
main: [
|
||||
'index',
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Philosophy',
|
||||
id: 'philosophy/index',
|
||||
},
|
||||
'gallery',
|
||||
{
|
||||
type: 'html',
|
||||
value: '<div class="sidebar-menu-divider"></div>',
|
||||
defaultStyle: true,
|
||||
},
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Voice',
|
||||
id: 'voice/index',
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
label: 'Visual Language',
|
||||
collapsible: true,
|
||||
link: {
|
||||
type: 'generated-index',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Overview',
|
||||
id: 'visual-language/index',
|
||||
},
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Logo',
|
||||
id: 'visual-language/logo',
|
||||
},
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Color',
|
||||
id: 'visual-language/color',
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
label: 'Typography',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Overview',
|
||||
id: 'visual-language/typography/index',
|
||||
},
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Web Environment',
|
||||
id: 'visual-language/typography/web-environment',
|
||||
},
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Non-web Environment',
|
||||
id: 'visual-language/typography/non-web-environment',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
label: 'Grid and Layout',
|
||||
collapsible: true,
|
||||
items: [
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Overview',
|
||||
id: 'visual-language/grid-and-layout/index',
|
||||
},
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Web Environment',
|
||||
id: 'visual-language/grid-and-layout/web-environment',
|
||||
},
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Non-web Environment',
|
||||
id: 'visual-language/grid-and-layout/non-web-environment',
|
||||
},
|
||||
],
|
||||
},
|
||||
// {
|
||||
// type: 'doc',
|
||||
// label: 'Photography',
|
||||
// id: 'visual-language/photography',
|
||||
// },
|
||||
// {
|
||||
// type: 'doc',
|
||||
// label: 'Illustration',
|
||||
// id: 'visual-language/illustration',
|
||||
// },
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'html',
|
||||
value: '<div class="sidebar-menu-divider"></div>',
|
||||
defaultStyle: true,
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
label: 'LSD - UI Library',
|
||||
collapsible: true,
|
||||
link: {
|
||||
type: 'generated-index',
|
||||
slug: 'category/lsd-ui-library',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Overview',
|
||||
id: 'lsd/index',
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
label: 'Design tokens',
|
||||
link: {
|
||||
type: 'generated-index',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
type: 'autogenerated',
|
||||
dirName: 'lsd/design-tokens',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
type: 'category',
|
||||
label: 'Components',
|
||||
link: {
|
||||
type: 'doc',
|
||||
id: 'lsd/components/index',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
type: 'autogenerated',
|
||||
dirName: 'lsd/components',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
type: 'category',
|
||||
label: 'Templates',
|
||||
collapsible: true,
|
||||
link: {
|
||||
type: 'generated-index',
|
||||
},
|
||||
items: [
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Presentation kits',
|
||||
id: 'templates/presentation-kits',
|
||||
},
|
||||
{
|
||||
type: 'doc',
|
||||
label: 'Social media assets',
|
||||
id: 'templates/social-media-assets',
|
||||
},
|
||||
],
|
||||
type: 'autogenerated',
|
||||
dirName: '.',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,28 +0,0 @@
|
|||
.root {
|
||||
width: 100px;
|
||||
border: 1px solid rgb(var(--lsd-border-primary));
|
||||
}
|
||||
|
||||
.root.fullWidth {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.root .color {
|
||||
width: 100%;
|
||||
height: 130px;
|
||||
border-bottom: 1px solid rgb(var(--lsd-border-primary));
|
||||
}
|
||||
|
||||
.root .info {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.root .title {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.root .variables {
|
||||
display: grid;
|
||||
gap: 8px 16px;
|
||||
grid-template: auto / auto 1fr;
|
||||
}
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
import React from 'react'
|
||||
import styles from './ColorCard.module.scss'
|
||||
import clsx from 'clsx'
|
||||
import { Typography } from '@acid-info/lsd-react'
|
||||
|
||||
export type ColorCardProps = Omit<
|
||||
React.HTMLProps<HTMLDivElement>,
|
||||
'title' | 'color'
|
||||
> & {
|
||||
color: string
|
||||
title: React.ReactNode
|
||||
fullWidth?: boolean
|
||||
variables?: {
|
||||
name: string
|
||||
value: string
|
||||
}[]
|
||||
}
|
||||
|
||||
export const ColorCard: React.FC<ColorCardProps> = ({
|
||||
title,
|
||||
color,
|
||||
fullWidth,
|
||||
variables = [],
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<div
|
||||
{...props}
|
||||
className={clsx(
|
||||
props.className,
|
||||
styles.root,
|
||||
fullWidth && styles.fullWidth,
|
||||
)}
|
||||
>
|
||||
<div className={styles.color} style={{ background: color }}></div>
|
||||
<div className={styles.info}>
|
||||
<Typography
|
||||
className={styles.title}
|
||||
variant="subtitle1"
|
||||
component="div"
|
||||
>
|
||||
{title}
|
||||
</Typography>
|
||||
<div className={styles.variables}>
|
||||
{variables.map((variable, index) => (
|
||||
<React.Fragment key={index}>
|
||||
<Typography variant="label2">{variable.name}</Typography>
|
||||
<Typography variant="label2">{variable.value}</Typography>
|
||||
</React.Fragment>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './ColorCard'
|
||||
|
|
@ -1,42 +0,0 @@
|
|||
.root {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid rgb(var(--lsd-border-primary));
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
text-decoration: none;
|
||||
text-decoration: none !important;
|
||||
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
.root .title {
|
||||
padding: 16px;
|
||||
font-size: 16px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
line-height: 24px;
|
||||
}
|
||||
|
||||
.root .image {
|
||||
}
|
||||
|
||||
.root .imageContainer {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 0 48px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
img {
|
||||
width: auto;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
user-select: none;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
import { Typography } from '@acid-info/lsd-react'
|
||||
import ThemedImage from '@theme/ThemedImage'
|
||||
import clsx from 'clsx'
|
||||
import React from 'react'
|
||||
import styles from './ComponentCard.module.scss'
|
||||
import Link, { Props as LinkProps } from '@docusaurus/Link'
|
||||
|
||||
export type ComponentCardProps = Omit<LinkProps, 'title' | 'color'> & {
|
||||
title: React.ReactNode
|
||||
imageSrc?: string
|
||||
imageDarkSrc?: string
|
||||
imageWidth?: string | number
|
||||
imageHeight?: string | number
|
||||
}
|
||||
|
||||
export const ComponentCard: React.FC<ComponentCardProps> = ({
|
||||
title,
|
||||
imageSrc,
|
||||
imageDarkSrc,
|
||||
imageWidth,
|
||||
imageHeight,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<Link {...props} className={clsx(props.className, styles.root)}>
|
||||
<Typography className={styles.title} component="div">
|
||||
{title}
|
||||
</Typography>
|
||||
<div className={styles.imageContainer}>
|
||||
<ThemedImage
|
||||
width={imageWidth}
|
||||
height={imageHeight}
|
||||
sources={{
|
||||
dark: imageDarkSrc || imageSrc || '',
|
||||
light: imageSrc || imageDarkSrc || '',
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './ComponentCard'
|
||||
|
|
@ -1,24 +0,0 @@
|
|||
@use "@acid-info/logos-docusaurus-theme/lib/client/css/utils";
|
||||
|
||||
.root {
|
||||
}
|
||||
|
||||
@include utils.responsive('md', 'up') {
|
||||
.root .item {
|
||||
&:nth-child(even) > a {
|
||||
border-left: none;
|
||||
}
|
||||
|
||||
&:not(.lastRow) > a {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@include utils.responsive('md', 'down') {
|
||||
.root .item {
|
||||
&:not(:last-child) > a {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,38 +0,0 @@
|
|||
import {
|
||||
Grid,
|
||||
GridProps,
|
||||
} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
|
||||
import React from 'react'
|
||||
import { ComponentCard, ComponentCardProps } from '../ComponentCard'
|
||||
import styles from './ComponentGrid.module.scss'
|
||||
import clsx from 'clsx'
|
||||
|
||||
export type ComponentGridProps = GridProps & {
|
||||
list: ComponentCardProps[]
|
||||
}
|
||||
|
||||
export const ComponentGrid: React.FC<ComponentGridProps> = ({
|
||||
list = [],
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<Grid
|
||||
md={{ cols: 2, wrap: true, gap: '0' }}
|
||||
{...props}
|
||||
className={clsx(styles.root, props.className)}
|
||||
>
|
||||
{list.map((props, idx) => (
|
||||
<Grid.Item
|
||||
md={1}
|
||||
key={idx}
|
||||
className={clsx(
|
||||
styles.item,
|
||||
idx >= list.length - 2 && styles.lastRow,
|
||||
)}
|
||||
>
|
||||
<ComponentCard {...props} />
|
||||
</Grid.Item>
|
||||
))}
|
||||
</Grid>
|
||||
)
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './ComponentGrid'
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
@use "@acid-info/logos-docusaurus-theme/lib/client/css/utils";
|
||||
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
background-color: rgb(var(--lsd-theme-secondary));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.thumbnail {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.enlarged {
|
||||
position: fixed;
|
||||
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
max-height: 90vh;
|
||||
max-width: 90vw;
|
||||
|
||||
display: block;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
position: fixed;
|
||||
top: 18px;
|
||||
right: 16px;
|
||||
|
||||
background-color: rgb(var(--lsd-theme-secondary)) !important;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
z-index: 1001;
|
||||
}
|
||||
|
|
@ -1,110 +0,0 @@
|
|||
import { LightBoxWrapper } from '@acid-info/logos-docusaurus-theme/lib/client/containers/LightBox'
|
||||
import { CloseIcon, IconButton } from '@acid-info/lsd-react'
|
||||
import clsx from 'clsx'
|
||||
import React, { useEffect, useMemo, useState } from 'react'
|
||||
import styles from './Image.module.scss'
|
||||
|
||||
export type LoadedImage = {
|
||||
preSrc: string
|
||||
width: number
|
||||
height: number
|
||||
placeholder: any
|
||||
src: string
|
||||
srcSet: string
|
||||
images: {
|
||||
width: number
|
||||
height: number
|
||||
}[]
|
||||
}
|
||||
|
||||
export type ImageProps = Omit<
|
||||
React.ImgHTMLAttributes<HTMLImageElement>,
|
||||
'src'
|
||||
> & {
|
||||
src?: string
|
||||
img?: LoadedImage | undefined | null
|
||||
minWidth?: number
|
||||
}
|
||||
|
||||
export const Image: React.FC<ImageProps> = ({
|
||||
minWidth = 0,
|
||||
src,
|
||||
img,
|
||||
...rest
|
||||
}) => {
|
||||
const [enlarged, setEnlarged] = useState(false)
|
||||
const singleImage = !img?.images || img.images.length === 0
|
||||
|
||||
const originalImage = {
|
||||
src: src,
|
||||
width: rest.width,
|
||||
height: rest.height,
|
||||
}
|
||||
|
||||
const images = img?.images || []
|
||||
|
||||
const sorted = useMemo(
|
||||
() =>
|
||||
[...images]
|
||||
.sort((a, b) => a.width - b.width)
|
||||
.filter(img => img.width >= minWidth),
|
||||
[images],
|
||||
)
|
||||
|
||||
const [smallest] = [sorted[0] ?? originalImage].map(img => ({
|
||||
width: img.width,
|
||||
height: img.height,
|
||||
src: 'src' in img ? img.src : 'path' in img ? img.path : '',
|
||||
}))
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape') {
|
||||
setEnlarged(false)
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', handleKeyDown)
|
||||
|
||||
return () => {
|
||||
document.removeEventListener('keydown', handleKeyDown)
|
||||
}
|
||||
}, [])
|
||||
|
||||
const imageElement = (
|
||||
<img
|
||||
src={smallest.src as string}
|
||||
width={smallest.width}
|
||||
height={smallest.height}
|
||||
onClick={() => !singleImage && setEnlarged(true)}
|
||||
{...rest}
|
||||
className={clsx(
|
||||
styles.image,
|
||||
!singleImage && styles.thumbnail,
|
||||
rest.className,
|
||||
)}
|
||||
/>
|
||||
)
|
||||
|
||||
return (
|
||||
<>
|
||||
{img ? imageElement : <LightBoxWrapper>{imageElement}</LightBoxWrapper>}
|
||||
{enlarged && (
|
||||
<div className={styles.overlay}>
|
||||
<IconButton
|
||||
size="small"
|
||||
onClick={() => setEnlarged(false)}
|
||||
className={styles.closeButton}
|
||||
>
|
||||
<CloseIcon color="primary" />
|
||||
</IconButton>
|
||||
<img
|
||||
src={originalImage.src as string}
|
||||
{...rest}
|
||||
className={styles.enlarged}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './Image'
|
||||
|
|
@ -1,61 +0,0 @@
|
|||
@use "@acid-info/logos-docusaurus-theme/lib/client/css/utils";
|
||||
|
||||
.thumbnailImageContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.thumbnailImage {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.masonry .thumbnailImageContainer {
|
||||
flex-direction: column;
|
||||
margin-bottom: 16px;
|
||||
height: auto; // overrides the height: 100% from the default thumbnailImageContainer
|
||||
}
|
||||
|
||||
.squareThumbnails .thumbnailImageContainer {
|
||||
aspect-ratio: 1 / 1;
|
||||
}
|
||||
|
||||
// Overlay and expanded image styles.
|
||||
.overlay {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
|
||||
background-color: rgb(var(--lsd-theme-secondary));
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
z-index: 10000;
|
||||
}
|
||||
|
||||
.closeButton {
|
||||
position: fixed;
|
||||
top: 18px;
|
||||
right: 16px;
|
||||
|
||||
background-color: rgb(var(--lsd-theme-secondary)) !important;
|
||||
|
||||
cursor: pointer;
|
||||
|
||||
z-index: 1001;
|
||||
}
|
||||
|
||||
// Single column image galleries on mobile don't have spacing between them.
|
||||
// The following padding bottom fixes that.
|
||||
@include utils.responsive('md', 'down') {
|
||||
.thumbnailImageContainer {
|
||||
padding-bottom: 16px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,104 +0,0 @@
|
|||
import {
|
||||
Grid,
|
||||
GridProps,
|
||||
} from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
|
||||
import clsx from 'clsx'
|
||||
import React from 'react'
|
||||
import { Image, LoadedImage } from '../Image/Image'
|
||||
import styles from './ImageGrid.module.scss'
|
||||
|
||||
type ImageType = {
|
||||
img?: { src: LoadedImage }
|
||||
alt?: string
|
||||
src: string
|
||||
}
|
||||
|
||||
type MasonryModeProps = {
|
||||
firstColumnSize: number
|
||||
images: ImageType[]
|
||||
}
|
||||
|
||||
// Masonry mode only has 2 columns with 1 item each.
|
||||
const MasonryMode: React.FC<MasonryModeProps> = ({
|
||||
firstColumnSize,
|
||||
images,
|
||||
}) => {
|
||||
const firstColumnImages = images.slice(0, firstColumnSize)
|
||||
const secondColumnImages = images.slice(firstColumnSize)
|
||||
|
||||
return (
|
||||
<>
|
||||
<Grid.Item>
|
||||
{firstColumnImages.map((image, index) => (
|
||||
<div key={index} className={styles.thumbnailImageContainer}>
|
||||
<Image
|
||||
minWidth={400}
|
||||
src={image.src}
|
||||
img={image.img?.src}
|
||||
alt={image.alt ?? ''}
|
||||
className={styles.thumbnailImage}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Grid.Item>
|
||||
<Grid.Item>
|
||||
{secondColumnImages.map((image, index) => (
|
||||
<div key={index} className={styles.thumbnailImageContainer}>
|
||||
<Image
|
||||
minWidth={400}
|
||||
src={image.src}
|
||||
img={image.img?.src}
|
||||
alt={image.alt ?? ''}
|
||||
className={styles.thumbnailImage}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</Grid.Item>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export type ImageGridProps = GridProps & {
|
||||
images: ImageType[]
|
||||
mode?: 'masonry' | 'regular' | 'square-thumbnails'
|
||||
firstColumnSize?: number
|
||||
}
|
||||
|
||||
export const ImageGrid: React.FC<ImageGridProps> = ({
|
||||
mode = 'regular',
|
||||
images,
|
||||
firstColumnSize = 0,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<>
|
||||
<Grid
|
||||
md={{ cols: mode === 'masonry' ? 2 : 3, gap: '16px' }}
|
||||
xs={{ cols: 2, gap: '16px' }}
|
||||
className={clsx(
|
||||
styles.imageGrid,
|
||||
mode === 'masonry' && styles.masonry,
|
||||
mode === 'regular' && styles.regular,
|
||||
mode === 'square-thumbnails' && styles.squareThumbnails,
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{mode === 'masonry' ? (
|
||||
<MasonryMode firstColumnSize={firstColumnSize} images={images} />
|
||||
) : (
|
||||
images.map((image, index) => (
|
||||
<Grid.Item key={index} className={styles.thumbnailImageContainer}>
|
||||
<Image
|
||||
minWidth={400}
|
||||
src={image.src}
|
||||
img={image.img?.src}
|
||||
alt={image.alt ?? ''}
|
||||
className={styles.thumbnailImage}
|
||||
/>
|
||||
</Grid.Item>
|
||||
))
|
||||
)}
|
||||
</Grid>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './ImageGrid'
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
.root {
|
||||
}
|
||||
|
||||
.iframeContainer {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
|
||||
iframe {
|
||||
transform: translateY(-20px);
|
||||
width: 100%;
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,184 +0,0 @@
|
|||
import { Dropdown } from '@acid-info/lsd-react'
|
||||
import { useColorMode } from '@docusaurus/theme-common'
|
||||
import clsx from 'clsx'
|
||||
import React, { useMemo, useRef, useState } from 'react'
|
||||
import styles from './StoryBookDemo.module.scss'
|
||||
|
||||
const onIframeLoad = (iframe: HTMLIFrameElement) => {
|
||||
const handleIframeMessage = (event: MessageEvent) => {
|
||||
if (
|
||||
typeof event.data === 'string' &&
|
||||
event.data.includes('storyRendered')
|
||||
) {
|
||||
// XXX: This if() block executes when storybook has finished rendering.
|
||||
// So if we ever want to implement a loading screen, this if() block may help.
|
||||
requestHeightFromIframe()
|
||||
} else if (event.data && event.data.type === 'iframeHeightResponse') {
|
||||
iframe.style.height = `${event.data.height}px`
|
||||
}
|
||||
}
|
||||
|
||||
// Request height from the iframe
|
||||
const requestHeightFromIframe = () => {
|
||||
if (!iframe || !iframe.contentWindow) {
|
||||
return
|
||||
}
|
||||
|
||||
iframe.contentWindow.postMessage(
|
||||
{
|
||||
type: 'requestHeight',
|
||||
},
|
||||
'*',
|
||||
)
|
||||
}
|
||||
|
||||
window.addEventListener('message', handleIframeMessage)
|
||||
|
||||
// The following setInterval is just a safety mechanism for the very unlikely case
|
||||
// of the iframe not sending a storyRendered message.
|
||||
setInterval(() => {
|
||||
requestHeightFromIframe()
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
type GlobalType = {
|
||||
name: string
|
||||
description: string
|
||||
defaultValue: string
|
||||
toolbar: {
|
||||
icon: string
|
||||
items: { title: string; value: string }[]
|
||||
}
|
||||
}
|
||||
|
||||
type ComponentProperty = {
|
||||
name: string
|
||||
type: {
|
||||
name: 'enum'
|
||||
value: string[]
|
||||
}
|
||||
defaultValue?: string
|
||||
}
|
||||
|
||||
export type GlobalControls = 'themeFont' | 'themeColor'
|
||||
|
||||
export type StorybookDemoProps = {
|
||||
name: string
|
||||
docId: string
|
||||
storyId: string
|
||||
storybookUrl: string
|
||||
globalTypes: Record<string, GlobalType>
|
||||
componentProperties: ComponentProperty[]
|
||||
globalControls?: GlobalControls[]
|
||||
}
|
||||
|
||||
export const StorybookDemo: React.FC<StorybookDemoProps> = ({
|
||||
name,
|
||||
docId,
|
||||
storyId,
|
||||
storybookUrl,
|
||||
globalTypes,
|
||||
globalControls = ['themeColor', 'themeFont'],
|
||||
componentProperties = [],
|
||||
}) => {
|
||||
const colorMode = useColorMode()
|
||||
|
||||
const iframeRef = useRef<HTMLIFrameElement>(null)
|
||||
|
||||
const [globalProps, setGlobalProps] = useState(
|
||||
Object.fromEntries(
|
||||
Object.entries(globalTypes).map(([name, prop]) => [
|
||||
name,
|
||||
name === 'themeColor'
|
||||
? colorMode.colorMode.slice(0, 1).toUpperCase() +
|
||||
colorMode.colorMode.slice(1)
|
||||
: prop.defaultValue,
|
||||
]),
|
||||
),
|
||||
)
|
||||
|
||||
const [props, setProps] = useState(
|
||||
Object.fromEntries(
|
||||
componentProperties.map(prop => [prop.name, prop.defaultValue]),
|
||||
),
|
||||
)
|
||||
|
||||
const embedUrl = useMemo(() => {
|
||||
const el = iframeRef.current
|
||||
|
||||
const url = el?.src
|
||||
? new URL(el.src)
|
||||
: new URL('/iframe.html', storybookUrl as string)
|
||||
|
||||
url.searchParams.set('id', docId)
|
||||
storyId && url.searchParams.set('storyId', storyId)
|
||||
url.searchParams.set('globals', 'themeColor:Dark;themeFont:sans-serif')
|
||||
url.searchParams.set('embedded', 'true')
|
||||
url.searchParams.set(
|
||||
'hide',
|
||||
'title,subtitle,toolbar' +
|
||||
(storyId ? ',description,canvas-border,code' : ''),
|
||||
)
|
||||
url.searchParams.set(
|
||||
'globalControls',
|
||||
globalControls && globalControls.length
|
||||
? globalControls.join(',')
|
||||
: 'false',
|
||||
)
|
||||
|
||||
return url.toString()
|
||||
}, [docId, storyId, globalProps, globalControls, props])
|
||||
|
||||
return (
|
||||
<div className={clsx(styles.root, styles[globalProps.themeColor])}>
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
gap: '0 8px',
|
||||
}}
|
||||
>
|
||||
{Object.entries(globalTypes).map(([name, prop]) => (
|
||||
<Dropdown
|
||||
key={name}
|
||||
value={globalProps[name]}
|
||||
onChange={value =>
|
||||
setGlobalProps(state => ({ ...state, [name]: value as string }))
|
||||
}
|
||||
options={prop.toolbar.items.map(i => ({
|
||||
name: i.title,
|
||||
value: i.value,
|
||||
}))}
|
||||
triggerLabel={prop.name}
|
||||
label={prop.name}
|
||||
/>
|
||||
))}
|
||||
{componentProperties.map(prop => (
|
||||
<Dropdown
|
||||
key={prop.name}
|
||||
value={props[prop.name]}
|
||||
onChange={value =>
|
||||
setProps(state => ({ ...state, [prop.name]: value as string }))
|
||||
}
|
||||
options={prop.type.value.map(i => ({
|
||||
name: i,
|
||||
value: i,
|
||||
}))}
|
||||
triggerLabel={prop.name}
|
||||
label={prop.name}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className={styles.iframeContainer}>
|
||||
<iframe
|
||||
ref={iframeRef}
|
||||
src={embedUrl}
|
||||
height={500}
|
||||
onLoad={() => {
|
||||
onIframeLoad(iframeRef.current)
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
@ -1 +0,0 @@
|
|||
export * from './StorybookDemo'
|
||||
|
|
@ -1,7 +1,2 @@
|
|||
export * from './ColorCard'
|
||||
export * from './ComponentCard'
|
||||
export * from './ComponentGrid'
|
||||
export * from './ImageGrid'
|
||||
export * from './StorybookDemo'
|
||||
|
||||
export * from '@acid-info/logos-docusaurus-brand-guidelines-theme/lib/client/components/mdx'
|
||||
export * from '@acid-info/logos-docusaurus-theme/lib/client/components/mdx'
|
||||
|
|
|
|||
|
|
@ -1,34 +0,0 @@
|
|||
:root {
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.sidebar-menu-divider {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.DocCardList--no-overview {
|
||||
article:first-child {
|
||||
display: none;
|
||||
}
|
||||
|
||||
article a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
article a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
}
|
||||
|
||||
.template-card-title {
|
||||
margin-bottom: 24px;
|
||||
margin-top: 40px;
|
||||
}
|
||||
|
||||
pre {
|
||||
background-color: rgb(var(--lsd-theme-secondary)) !important;
|
||||
border: 1px solid rgb(var(--lsd-border-primary)) !important;
|
||||
}
|
||||
|
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 710 B After Width: | Height: | Size: 710 B |
|
Before Width: | Height: | Size: 811 B After Width: | Height: | Size: 811 B |
|
Before Width: | Height: | Size: 7.5 KiB After Width: | Height: | Size: 7.5 KiB |
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 2.3 KiB After Width: | Height: | Size: 2.3 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 2.2 KiB |
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.4 KiB |
|
Before Width: | Height: | Size: 287 B After Width: | Height: | Size: 287 B |
|
Before Width: | Height: | Size: 3.1 KiB After Width: | Height: | Size: 3.1 KiB |
|
Before Width: | Height: | Size: 1.6 KiB After Width: | Height: | Size: 1.6 KiB |
|
Before Width: | Height: | Size: 5.0 KiB After Width: | Height: | Size: 5.0 KiB |
|
Before Width: | Height: | Size: 1.2 KiB After Width: | Height: | Size: 1.2 KiB |
|
Before Width: | Height: | Size: 2.0 KiB After Width: | Height: | Size: 2.0 KiB |
|
Before Width: | Height: | Size: 677 B After Width: | Height: | Size: 677 B |
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue