mirror of
https://github.com/Steffo99/bluelib.git
synced 2024-12-23 03:54:21 +00:00
🔨 Theme Storybook for Bluelib
This commit is contained in:
parent
0ab75379a1
commit
1cbfe42df1
33 changed files with 511 additions and 3 deletions
9
.storybook/BluelibTheme.js
Normal file
9
.storybook/BluelibTheme.js
Normal file
|
@ -0,0 +1,9 @@
|
||||||
|
import { create } from '@storybook/theming'
|
||||||
|
|
||||||
|
export default create({
|
||||||
|
base: 'light',
|
||||||
|
brandTitle: 'Bluelib React',
|
||||||
|
brandUrl: 'https://github.com/Steffo99/bluelib-react',
|
||||||
|
// TODO: Change this when Bluelib has an icon
|
||||||
|
// brandImage: 'https://place-hold.it/350x150',
|
||||||
|
})
|
7
.storybook/manager.js
Normal file
7
.storybook/manager.js
Normal file
|
@ -0,0 +1,7 @@
|
||||||
|
import { addons } from '@storybook/addons';
|
||||||
|
import BluelibTheme from "./BluelibTheme"
|
||||||
|
|
||||||
|
// noinspection JSUnresolvedFunction
|
||||||
|
addons.setConfig({
|
||||||
|
theme: BluelibTheme,
|
||||||
|
});
|
|
@ -1,19 +1,22 @@
|
||||||
import { Bluelib } from "../src/components/Bluelib"
|
import BluelibTheme from "./BluelibTheme"
|
||||||
|
|
||||||
|
|
||||||
export const parameters = {
|
export const parameters = {
|
||||||
argTypes: {
|
argTypes: {
|
||||||
bluelibClassNames: {
|
bluelibClassNames: {
|
||||||
|
type: "string",
|
||||||
control: {type: "string"},
|
control: {type: "string"},
|
||||||
description: "Additional Bluelib classNames to be appended to the element's classNames",
|
description: "Additional Bluelib classNames to be appended to the element's classNames",
|
||||||
table: {category: "Global props"}
|
table: {category: "Global props"}
|
||||||
},
|
},
|
||||||
customColor: {
|
customColor: {
|
||||||
|
type: "string",
|
||||||
control: {type: "color"},
|
control: {type: "color"},
|
||||||
description: "Apply a Bluelib custom color to the element",
|
description: "Apply a Bluelib custom color to the element",
|
||||||
table: {category: "Global props"}
|
table: {category: "Global props"}
|
||||||
},
|
},
|
||||||
disabled: {
|
disabled: {
|
||||||
|
type: "boolean",
|
||||||
control: {type: "boolean"},
|
control: {type: "boolean"},
|
||||||
description: "Apply the disabled status to an element",
|
description: "Apply the disabled status to an element",
|
||||||
table: {category: "Global props"}
|
table: {category: "Global props"}
|
||||||
|
@ -41,4 +44,8 @@ export const parameters = {
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
panelPosition: "right",
|
||||||
|
docs: {
|
||||||
|
theme: BluelibTheme,
|
||||||
|
}
|
||||||
}
|
}
|
|
@ -4,7 +4,9 @@
|
||||||
"license": "AGPL-3.0-or-later",
|
"license": "AGPL-3.0-or-later",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@storybook/addon-docs": "^6.3.7",
|
"@storybook/addon-docs": "^6.3.7",
|
||||||
|
"@storybook/addons": "^6.3.7",
|
||||||
"@storybook/storybook-deployer": "^2.8.10",
|
"@storybook/storybook-deployer": "^2.8.10",
|
||||||
|
"@storybook/theming": "^6.3.7",
|
||||||
"@testing-library/jest-dom": "^5.11.4",
|
"@testing-library/jest-dom": "^5.11.4",
|
||||||
"@testing-library/react": "^11.1.0",
|
"@testing-library/react": "^11.1.0",
|
||||||
"@testing-library/user-event": "^12.1.10",
|
"@testing-library/user-event": "^12.1.10",
|
||||||
|
|
19
src/components/semantics/Abbreviation.stories.jsx
Normal file
19
src/components/semantics/Abbreviation.stories.jsx
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Decorators from "../../utils/Decorators"
|
||||||
|
import { Abbreviation as AbbreviationComponent } from "./Abbreviation"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: AbbreviationComponent,
|
||||||
|
title: "Semantics/Abbreviation",
|
||||||
|
decorators: [Decorators.Bluelib],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Abbreviation = props => (
|
||||||
|
<AbbreviationComponent {...props}>DOTA</AbbreviationComponent>
|
||||||
|
)
|
||||||
|
Abbreviation.args = {
|
||||||
|
title: "Defense of the Ancients"
|
||||||
|
}
|
19
src/components/semantics/Abbreviation.tsx
Normal file
19
src/components/semantics/Abbreviation.tsx
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Types from "../../types"
|
||||||
|
import {BaseElement} from "../BaseElement"
|
||||||
|
import mergeClassNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
export interface AbbreviationProps extends Types.BluelibHTMLProps<HTMLElement> {
|
||||||
|
title: string,
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export function Abbreviation({...props}: AbbreviationProps): JSX.Element {
|
||||||
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-abbr")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"abbr"} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
17
src/components/semantics/BringAttention.stories.jsx
Normal file
17
src/components/semantics/BringAttention.stories.jsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Decorators from "../../utils/Decorators"
|
||||||
|
import { BringAttention as BringAttentionComponent } from "./BringAttention"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: BringAttentionComponent,
|
||||||
|
title: "Semantics/Bring Attention",
|
||||||
|
decorators: [Decorators.Bluelib],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const BringAttention = props => (
|
||||||
|
<BringAttentionComponent {...props}>This is important.</BringAttentionComponent>
|
||||||
|
)
|
||||||
|
BringAttention.args = {}
|
17
src/components/semantics/BringAttention.tsx
Normal file
17
src/components/semantics/BringAttention.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Types from "../../types"
|
||||||
|
import {BaseElement} from "../BaseElement"
|
||||||
|
import mergeClassNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
export interface BringAttentionProps extends Types.BluelibHTMLProps<HTMLElement> {}
|
||||||
|
|
||||||
|
|
||||||
|
export function BringAttention({...props}: BringAttentionProps): JSX.Element {
|
||||||
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-b")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"b"} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
19
src/components/semantics/Cite.stories.jsx
Normal file
19
src/components/semantics/Cite.stories.jsx
Normal file
|
@ -0,0 +1,19 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Decorators from "../../utils/Decorators"
|
||||||
|
import { Cite as CiteComponent } from "./Cite"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: CiteComponent,
|
||||||
|
title: "Semantics/Cite",
|
||||||
|
decorators: [Decorators.Bluelib],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Cite = props => (
|
||||||
|
<CiteComponent {...props}>--Steffo, 2021</CiteComponent>
|
||||||
|
)
|
||||||
|
Cite.args = {
|
||||||
|
|
||||||
|
}
|
17
src/components/semantics/Cite.tsx
Normal file
17
src/components/semantics/Cite.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Types from "../../types"
|
||||||
|
import {BaseElement} from "../BaseElement"
|
||||||
|
import mergeClassNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
export interface CiteProps extends Types.BluelibHTMLProps<HTMLElement> {}
|
||||||
|
|
||||||
|
|
||||||
|
export function Cite({...props}: CiteProps): JSX.Element {
|
||||||
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-cite")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"cite"} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
17
src/components/semantics/Code.stories.jsx
Normal file
17
src/components/semantics/Code.stories.jsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Decorators from "../../utils/Decorators"
|
||||||
|
import { Code as CodeComponent } from "./Code"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: CodeComponent,
|
||||||
|
title: "Semantics/Code",
|
||||||
|
decorators: [Decorators.Bluelib],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Code = props => (
|
||||||
|
<CodeComponent {...props}>"Hello world!"</CodeComponent>
|
||||||
|
)
|
||||||
|
Code.args = {}
|
17
src/components/semantics/Code.tsx
Normal file
17
src/components/semantics/Code.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Types from "../../types"
|
||||||
|
import {BaseElement} from "../BaseElement"
|
||||||
|
import mergeClassNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
export interface CodeProps extends Types.BluelibHTMLProps<HTMLElement> {}
|
||||||
|
|
||||||
|
|
||||||
|
export function Code({...props}: CodeProps): JSX.Element {
|
||||||
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-code")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"code"} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
17
src/components/semantics/Definition.stories.jsx
Normal file
17
src/components/semantics/Definition.stories.jsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Decorators from "../../utils/Decorators"
|
||||||
|
import { Definition as DefinitionComponent } from "./Definition"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: DefinitionComponent,
|
||||||
|
title: "Semantics/Definition",
|
||||||
|
decorators: [Decorators.Bluelib],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Definition = props => (
|
||||||
|
<DefinitionComponent {...props}>Term</DefinitionComponent>
|
||||||
|
)
|
||||||
|
Definition.args = {}
|
17
src/components/semantics/Definition.tsx
Normal file
17
src/components/semantics/Definition.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Types from "../../types"
|
||||||
|
import {BaseElement} from "../BaseElement"
|
||||||
|
import mergeClassNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
export interface DefinitionProps extends Types.BluelibHTMLProps<HTMLElement> {}
|
||||||
|
|
||||||
|
|
||||||
|
export function Definition({...props}: DefinitionProps): JSX.Element {
|
||||||
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-dfn")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"dfn"} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
17
src/components/semantics/Emphasis.stories.jsx
Normal file
17
src/components/semantics/Emphasis.stories.jsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Decorators from "../../utils/Decorators"
|
||||||
|
import { Emphasis as EmphasisComponent } from "./Emphasis"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: EmphasisComponent,
|
||||||
|
title: "Semantics/Emphasis",
|
||||||
|
decorators: [Decorators.Bluelib],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Emphasis = props => (
|
||||||
|
<div>This is <EmphasisComponent {...props}>really</EmphasisComponent> good.</div>
|
||||||
|
)
|
||||||
|
Emphasis.args = {}
|
17
src/components/semantics/Emphasis.tsx
Normal file
17
src/components/semantics/Emphasis.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Types from "../../types"
|
||||||
|
import {BaseElement} from "../BaseElement"
|
||||||
|
import mergeClassNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
export interface EmphasisProps extends Types.BluelibHTMLProps<HTMLElement> {}
|
||||||
|
|
||||||
|
|
||||||
|
export function Emphasis({...props}: EmphasisProps): JSX.Element {
|
||||||
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-em")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"em"} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
17
src/components/semantics/Mark.stories.jsx
Normal file
17
src/components/semantics/Mark.stories.jsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Decorators from "../../utils/Decorators"
|
||||||
|
import { Mark as MarkComponent } from "./Mark"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: MarkComponent,
|
||||||
|
title: "Semantics/Mark",
|
||||||
|
decorators: [Decorators.Bluelib],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Mark = props => (
|
||||||
|
<MarkComponent {...props}>Marco Function</MarkComponent>
|
||||||
|
)
|
||||||
|
Mark.args = {}
|
17
src/components/semantics/Mark.tsx
Normal file
17
src/components/semantics/Mark.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Types from "../../types"
|
||||||
|
import {BaseElement} from "../BaseElement"
|
||||||
|
import mergeClassNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
export interface MarkProps extends Types.BluelibHTMLProps<HTMLElement> {}
|
||||||
|
|
||||||
|
|
||||||
|
export function Mark({...props}: MarkProps): JSX.Element {
|
||||||
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-mark")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"mark"} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
17
src/components/semantics/Quote.stories.jsx
Normal file
17
src/components/semantics/Quote.stories.jsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Decorators from "../../utils/Decorators"
|
||||||
|
import { Quote as QuoteComponent } from "./Quote"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: QuoteComponent,
|
||||||
|
title: "Semantics/Quote",
|
||||||
|
decorators: [Decorators.Bluelib],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Quote = props => (
|
||||||
|
<QuoteComponent {...props}>Ho appena dichiarato guerra agli Stati Uniti per sbaglio!</QuoteComponent>
|
||||||
|
)
|
||||||
|
Quote.args = {}
|
17
src/components/semantics/Quote.tsx
Normal file
17
src/components/semantics/Quote.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Types from "../../types"
|
||||||
|
import {BaseElement} from "../BaseElement"
|
||||||
|
import mergeClassNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
export interface QuoteProps extends Types.BluelibHTMLProps<HTMLElement> {}
|
||||||
|
|
||||||
|
|
||||||
|
export function Quote({...props}: QuoteProps): JSX.Element {
|
||||||
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-q")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"q"} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
17
src/components/semantics/Sample.stories.jsx
Normal file
17
src/components/semantics/Sample.stories.jsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Decorators from "../../utils/Decorators"
|
||||||
|
import { Sample as SampleComponent } from "./Sample"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: SampleComponent,
|
||||||
|
title: "Semantics/Sample",
|
||||||
|
decorators: [Decorators.Bluelib],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Sample = props => (
|
||||||
|
<SampleComponent {...props}>drwx------ 2 steffo steffo 4096 23 ago 05.06 Desktop</SampleComponent>
|
||||||
|
)
|
||||||
|
Sample.args = {}
|
17
src/components/semantics/Sample.tsx
Normal file
17
src/components/semantics/Sample.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Types from "../../types"
|
||||||
|
import {BaseElement} from "../BaseElement"
|
||||||
|
import mergeClassNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
export interface SampleProps extends Types.BluelibHTMLProps<HTMLElement> {}
|
||||||
|
|
||||||
|
|
||||||
|
export function Sample({...props}: SampleProps): JSX.Element {
|
||||||
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-samp")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"samp"} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
17
src/components/semantics/Side.stories.jsx
Normal file
17
src/components/semantics/Side.stories.jsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Decorators from "../../utils/Decorators"
|
||||||
|
import { Side as SideComponent } from "./Side"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: SideComponent,
|
||||||
|
title: "Semantics/Side",
|
||||||
|
decorators: [Decorators.Bluelib],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Side = props => (
|
||||||
|
<SideComponent {...props}>This is a small, irrelevant, side comment.</SideComponent>
|
||||||
|
)
|
||||||
|
Side.args = {}
|
17
src/components/semantics/Side.tsx
Normal file
17
src/components/semantics/Side.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Types from "../../types"
|
||||||
|
import {BaseElement} from "../BaseElement"
|
||||||
|
import mergeClassNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
export interface SideProps extends Types.BluelibHTMLProps<HTMLElement> {}
|
||||||
|
|
||||||
|
|
||||||
|
export function Side({...props}: SideProps): JSX.Element {
|
||||||
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-small")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"small"} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
17
src/components/semantics/Strikethrough.stories.jsx
Normal file
17
src/components/semantics/Strikethrough.stories.jsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Decorators from "../../utils/Decorators"
|
||||||
|
import { Strikethrough as StrikethroughComponent } from "./Strikethrough"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: StrikethroughComponent,
|
||||||
|
title: "Semantics/Strikethrough",
|
||||||
|
decorators: [Decorators.Bluelib],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Strikethrough = props => (
|
||||||
|
<StrikethroughComponent {...props}>This is wrong.</StrikethroughComponent>
|
||||||
|
)
|
||||||
|
Strikethrough.args = {}
|
17
src/components/semantics/Strikethrough.tsx
Normal file
17
src/components/semantics/Strikethrough.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Types from "../../types"
|
||||||
|
import {BaseElement} from "../BaseElement"
|
||||||
|
import mergeClassNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
export interface StrikethroughProps extends Types.BluelibHTMLProps<HTMLElement> {}
|
||||||
|
|
||||||
|
|
||||||
|
export function Strikethrough({...props}: StrikethroughProps): JSX.Element {
|
||||||
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-s")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"s"} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
17
src/components/semantics/Strong.stories.jsx
Normal file
17
src/components/semantics/Strong.stories.jsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Decorators from "../../utils/Decorators"
|
||||||
|
import { Strong as StrongComponent } from "./Strong"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: StrongComponent,
|
||||||
|
title: "Semantics/Strong",
|
||||||
|
decorators: [Decorators.Bluelib],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Strong = props => (
|
||||||
|
<StrongComponent {...props}>This is something of a strong importance!</StrongComponent>
|
||||||
|
)
|
||||||
|
Strong.args = {}
|
17
src/components/semantics/Strong.tsx
Normal file
17
src/components/semantics/Strong.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Types from "../../types"
|
||||||
|
import {BaseElement} from "../BaseElement"
|
||||||
|
import mergeClassNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
export interface StrongProps extends Types.BluelibHTMLProps<HTMLElement> {}
|
||||||
|
|
||||||
|
|
||||||
|
export function Strong({...props}: StrongProps): JSX.Element {
|
||||||
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-strong")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"strong"} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
17
src/components/semantics/UAnnotation.stories.jsx
Normal file
17
src/components/semantics/UAnnotation.stories.jsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Decorators from "../../utils/Decorators"
|
||||||
|
import { UAnnotation as UAnnotationComponent } from "./UAnnotation"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: UAnnotationComponent,
|
||||||
|
title: "Semantics/U Annotation",
|
||||||
|
decorators: [Decorators.Bluelib],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const UAnnotation = props => (
|
||||||
|
<UAnnotationComponent {...props}>This text is annotated without any comment.</UAnnotationComponent>
|
||||||
|
)
|
||||||
|
UAnnotation.args = {}
|
17
src/components/semantics/UAnnotation.tsx
Normal file
17
src/components/semantics/UAnnotation.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Types from "../../types"
|
||||||
|
import {BaseElement} from "../BaseElement"
|
||||||
|
import mergeClassNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
export interface UAnnotationProps extends Types.BluelibHTMLProps<HTMLElement> {}
|
||||||
|
|
||||||
|
|
||||||
|
export function UAnnotation({...props}: UAnnotationProps): JSX.Element {
|
||||||
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-u")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"u"} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
18
src/components/semantics/Variable.stories.jsx
Normal file
18
src/components/semantics/Variable.stories.jsx
Normal file
|
@ -0,0 +1,18 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Decorators from "../../utils/Decorators"
|
||||||
|
import { Variable as VariableComponent } from "./Variable"
|
||||||
|
import { Code } from "./Code"
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
component: VariableComponent,
|
||||||
|
title: "Semantics/Variable",
|
||||||
|
decorators: [Decorators.Bluelib],
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export const Variable = props => (
|
||||||
|
<Code>let <VariableComponent {...props}>variable</VariableComponent> = 1</Code>
|
||||||
|
)
|
||||||
|
Variable.args = {}
|
17
src/components/semantics/Variable.tsx
Normal file
17
src/components/semantics/Variable.tsx
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import * as React from "react"
|
||||||
|
import * as ReactDOM from "react-dom"
|
||||||
|
import * as Types from "../../types"
|
||||||
|
import {BaseElement} from "../BaseElement"
|
||||||
|
import mergeClassNames from "classnames"
|
||||||
|
|
||||||
|
|
||||||
|
export interface VariableProps extends Types.BluelibHTMLProps<HTMLElement> {}
|
||||||
|
|
||||||
|
|
||||||
|
export function Variable({...props}: VariableProps): JSX.Element {
|
||||||
|
props.bluelibClassNames = mergeClassNames(props.bluelibClassNames, "semantic-var")
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseElement kind={"var"} {...props}/>
|
||||||
|
)
|
||||||
|
}
|
|
@ -2036,7 +2036,7 @@
|
||||||
prop-types "^15.7.2"
|
prop-types "^15.7.2"
|
||||||
regenerator-runtime "^0.13.7"
|
regenerator-runtime "^0.13.7"
|
||||||
|
|
||||||
"@storybook/addons@6.3.7", "@storybook/addons@^6.3.0":
|
"@storybook/addons@6.3.7", "@storybook/addons@^6.3.0", "@storybook/addons@^6.3.7":
|
||||||
version "6.3.7"
|
version "6.3.7"
|
||||||
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.7.tgz#7c6b8d11b65f67b1884f6140437fe996dc39537a"
|
resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.3.7.tgz#7c6b8d11b65f67b1884f6140437fe996dc39537a"
|
||||||
integrity sha512-9stVjTcc52bqqh7YQex/LpSjJ4e2Czm4/ZYDjIiNy0p4OZEx+yLhL5mZzMWh2NQd6vv+pHASBSxf2IeaR5511A==
|
integrity sha512-9stVjTcc52bqqh7YQex/LpSjJ4e2Czm4/ZYDjIiNy0p4OZEx+yLhL5mZzMWh2NQd6vv+pHASBSxf2IeaR5511A==
|
||||||
|
@ -2562,7 +2562,7 @@
|
||||||
shelljs "^0.8.1"
|
shelljs "^0.8.1"
|
||||||
yargs "^15.0.0"
|
yargs "^15.0.0"
|
||||||
|
|
||||||
"@storybook/theming@6.3.7":
|
"@storybook/theming@6.3.7", "@storybook/theming@^6.3.7":
|
||||||
version "6.3.7"
|
version "6.3.7"
|
||||||
resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.7.tgz#6daf9a21b26ed607f3c28a82acd90c0248e76d8b"
|
resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.3.7.tgz#6daf9a21b26ed607f3c28a82acd90c0248e76d8b"
|
||||||
integrity sha512-GXBdw18JJd5jLLcRonAZWvGGdwEXByxF1IFNDSOYCcpHWsMgTk4XoLjceu9MpXET04pVX51LbVPLCvMdggoohg==
|
integrity sha512-GXBdw18JJd5jLLcRonAZWvGGdwEXByxF1IFNDSOYCcpHWsMgTk4XoLjceu9MpXET04pVX51LbVPLCvMdggoohg==
|
||||||
|
|
Loading…
Reference in a new issue