VSinerva/freesewing
1
0
Fork 0
Code Activity

[react] feat: Added docs for components/LineDrawing

Browse source
This commit is contained in:
joostdecock 2025-05-24 14:57:15 +02:00
parent 439315de02
commit 254e271196
40 changed files with 1204 additions and 163 deletions
Download patch file Download diff file Expand all files Collapse all files

14
packages/react/components/LineDrawing/aaron.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.5
/**
* A linedrawing component for Aaron
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Aaron = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-2 -15 152 152" {...{ stroke, className }}>
@ -24,9 +26,11 @@ export const Aaron = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Aaron
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const AaronFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-23 0 119 119" {...{ className }}>
@ -37,9 +41,11 @@ export const AaronFront = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Aaron
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const AaronBack = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="51 0 119 119" {...{ className }}>
@ -50,7 +56,7 @@ export const AaronBack = ({ className, stroke = 1 }) => (
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

14
packages/react/components/LineDrawing/albert.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.5
/**
* A linedrawing component for Albert
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Albert = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-10 -2 146 146" {...{ className }}>
@ -24,9 +26,11 @@ export const Albert = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Albert
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const AlbertFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-41 -2 145 145" {...{ className }}>
@ -37,9 +41,11 @@ export const AlbertFront = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Albert
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const AlbertBack = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="74 0 74 119" {...props}>
@ -50,7 +56,7 @@ export const AlbertBack = ({ className, stroke = 1 }) => (
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

14
packages/react/components/LineDrawing/bee.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.4
/**
* A linedrawing component for Bee
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Bee = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-20 0 120 120" {...{ stroke, className }}>
@ -21,14 +23,20 @@ export const Bee = ({ className, stroke = 1 }) => (
)
/**
* Front is the same
* A linedrawing component for the front of Bee
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BeeFront = Bee
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/bella.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.5
/**
* A linedrawing component for Bella
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Bella = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="2 -30 155 155" {...{ stroke, className }}>
@ -24,9 +26,11 @@ export const Bella = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Bella
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BellaFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-4 2 89 86" {...{ className, stroke }}>
@ -34,8 +38,14 @@ export const BellaFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Bella
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BellaBack = ({
className = 'tw:w-full', // CSS classes to apply
@ -54,7 +64,7 @@ export const BellaBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

16
packages/react/components/LineDrawing/benjamin.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 1.2
/**
* A linedrawing component for Benjamin
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Benjamin = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 -44 138 138" {...{ className, stroke }}>
@ -20,15 +22,21 @@ export const Benjamin = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* Front is the same
/**
* A linedrawing component for the front of Benjamin
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BenjaminFront = Benjamin
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="folds"

20
packages/react/components/LineDrawing/bent.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.7
/**
* A linedrawing component for Bent
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Bent = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 -70 210 210" {...{ stroke }}>
@ -24,9 +26,11 @@ export const Bent = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Bent
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BentFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 -1 103 103" {...{ className, stroke }}>
@ -34,8 +38,14 @@ export const BentFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Bent
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BentBack = ({
className = 'tw:w-full', // CSS classes to apply
@ -54,7 +64,7 @@ export const BentBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/bibi.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.5
/**
* A linedrawing component for Bibi
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Bibi = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="2 -34 167 167" {...{ className }}>
@ -24,9 +26,11 @@ export const Bibi = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Bibi
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BibiFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 85 90" {...{ className }}>
@ -34,8 +38,14 @@ export const BibiFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Bibi
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BibiBack = ({
className = 'tw:w-full', // CSS classes to apply
@ -54,7 +64,7 @@ export const BibiBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/bob.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.15
/**
* A linedrawing component for Bob
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Bob = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-1 -26 138 138" {...{ className }}>
@ -24,9 +26,11 @@ export const Bob = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Bob
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BobFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-10 1 87 87" {...{ className }}>
@ -34,8 +38,14 @@ export const BobFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Bob
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BobBack = ({
className = 'tw:w-full', // CSS classes to apply
@ -54,7 +64,7 @@ export const BobBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

22
packages/react/components/LineDrawing/breanna.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.3
/**
* A linedrawing component for Breanna
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Breanna = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-5 0 106 106" {...{ className, stroke }}>
@ -24,11 +26,13 @@ export const Breanna = ({ className, stroke = 1 }) => (
)
/**
* A linedrawing component for Breanna
* A linedrawing component for the front of Breanna
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BreannaFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 -15 92 92" {...{ className }}>
@ -36,8 +40,14 @@ export const BreannaFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Breanna
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BreannaBack = ({
className = 'tw:w-full', // CSS classes to apply
@ -56,7 +66,7 @@ export const BreannaBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/brian.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.5
/**
* A linedrawing component for Brian
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Brian = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 -40 189 189" {...{ className }}>
@ -24,9 +26,11 @@ export const Brian = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Brian
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BrianFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 93 93" {...{ className, stroke }}>
@ -34,8 +38,14 @@ export const BrianFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Brian
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BrianBack = ({
className = 'tw:w-full', // CSS classes to apply
@ -54,7 +64,7 @@ export const BrianBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/bruce.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.5
/**
* A linedrawing component for Bruce
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Bruce = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-27 0 155 155" {...{ className, stroke }}>
@ -26,9 +28,11 @@ export const Bruce = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Bruce
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BruceFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 -10 101 101" {...{ className }}>
@ -36,8 +40,14 @@ export const BruceFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Bruce
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const BruceBack = ({
className = 'tw:w-full', // CSS classes to apply
@ -56,7 +66,7 @@ export const BruceBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/carlita.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.5
/**
* A linedrawing component for Carlita
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Carlita = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 194 175" {...{ className }}>
@ -24,9 +26,11 @@ export const Carlita = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Carlita
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const CarlitaFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-35 4 168 168" {...{ className }}>
@ -34,8 +38,14 @@ export const CarlitaFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Carlita
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const CarlitaBack = ({
className = 'w-64', // CSS classes to apply
@ -54,7 +64,7 @@ export const CarlitaBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/carlton.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.5
/**
* A linedrawing component for Carlton
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Carlton = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 194 175" {...{ className, stroke }}>
@ -24,9 +26,11 @@ export const Carlton = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Carlton
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const CarltonFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-35 4 168 168" {...{ className }}>
@ -34,8 +38,14 @@ export const CarltonFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Carlton
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const CarltonBack = ({
className = 'w-64', // CSS classes to apply
@ -54,7 +64,7 @@ export const CarltonBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/charlie.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 1.8
/**
* A linedrawing component for Charlie
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Charlie = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 214 265" {...{ className }}>
@ -24,9 +26,11 @@ export const Charlie = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Charlie
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const CharlieFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-70 0 265 265" {...{ className }}>
@ -34,8 +38,14 @@ export const CharlieFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Charlie
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const CharlieBack = ({
className = 'w-64', // CSS classes to apply
@ -54,7 +64,7 @@ export const CharlieBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/cornelius.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 1.3
/**
* A linedrawing component for Cornelius
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Cornelius = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 320 218" {...{ className, stroke }}>
@ -24,9 +26,11 @@ export const Cornelius = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Cornelius
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const CorneliusFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-30 0 215 215" {...{ className, stroke }}>
@ -34,8 +38,14 @@ export const CorneliusFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Cornelius
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const CorneliusBack = ({
className = 'w-64', // CSS classes to apply
@ -54,7 +64,7 @@ export const CorneliusBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/diana.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 1
/**
* A linedrawing component for Diana
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Diana = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 282 111" {...{ className }}>
@ -24,9 +26,11 @@ export const Diana = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front Diana
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const DianaFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 -10 141 141" {...{ className }}>
@ -34,8 +38,14 @@ export const DianaFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back Diana
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const DianaBack = ({
className = 'w-64', // CSS classes to apply
@ -54,7 +64,7 @@ export const DianaBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

16
packages/react/components/LineDrawing/florence.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 1.3
/**
* A linedrawing component for Florence
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Florence = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-1 -10 245 245" {...{ className }}>
@ -20,13 +22,21 @@ export const Florence = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
// Front is the same
/**
* A linedrawing component for the front of Florence
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const FlorenceFront = Florence
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

18
packages/react/components/LineDrawing/florent.mjs
View file

@ -8,11 +8,13 @@ import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
const strokeScale = 1.3
/**
* A linedrawing component for Florence
* A linedrawing component for Florent
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Florent = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 -30 236 236" {...{ className, stroke }}>
@ -20,13 +22,21 @@ export const Florent = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
// Front is the same
/**
* A linedrawing component for the front of Florent
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const FlorentFront = Florent
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/gozer.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 1.3
/**
* A linedrawing component for Gozer
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Gozer = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 186 178" {...{ className }}>
@ -24,9 +26,11 @@ export const Gozer = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Gozer
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const GozerFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-40 0 178 178" {...{ className, stroke }}>
@ -34,8 +38,14 @@ export const GozerFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Gozer
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const GozerBack = ({
className = 'w-64', // CSS classes to apply
@ -54,7 +64,7 @@ export const GozerBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="folds"

16
packages/react/components/LineDrawing/hi.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 1.3
/**
* A linedrawing component for Hi
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Hi = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 -40 228 228" {...{ className }}>
@ -20,13 +22,21 @@ export const Hi = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
// Front is the same
/**
* A linedrawing component for the front of Hi
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const HiFront = Hi
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="folds"

16
packages/react/components/LineDrawing/holmes.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 1.3
/**
* A linedrawing component for Holmes
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Holmes = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 -30 260 260" {...{ className }}>
@ -20,13 +22,21 @@ export const Holmes = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
// Front is the same
/**
* A linedrawing component for the front of Holmes
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const HolmesFront = Holmes
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

14
packages/react/components/LineDrawing/hortensia.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.7
/**
* A linedrawing component for Hortensia
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Hortensia = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-2 0 129 129" {...{ className }}>
@ -20,7 +22,15 @@ export const Hortensia = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
// Front is the same
/**
* A linedrawing component for the front of Hortensia
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const HortensiaFront = Hortensia
/*

10
packages/react/components/LineDrawing/huey.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.7
/**
* A linedrawing component for Huey
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Huey = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 334 218" {...{ className }}>
@ -24,9 +26,11 @@ export const Huey = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for front of Huey
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const HueyFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-20 0 216 216" {...{ className }}>
@ -54,7 +58,7 @@ export const HueyBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/hugo.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.7
/**
* A linedrawing component for Hugo
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Hugo = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 334 334" {...{ className, stroke }}>
@ -24,9 +26,11 @@ export const Hugo = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Hugo
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const HugoFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-27 0 218 218" {...{ className, stroke }}>
@ -34,8 +38,14 @@ export const HugoFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Hugo
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const HugoBack = ({
className = 'w-64', // CSS classes to apply
@ -54,7 +64,7 @@ export const HugoBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/jane.mjs
View file

@ -8,11 +8,13 @@ import { LineDrawingWrapper, thin, dashed } from './shared.mjs'
const strokeScale = 0.5
/**
* A linedrawing component for Aaron
* A linedrawing component for Jane
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Jane = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 1052.0441 2409.9082" {...{ stroke, className }}>
@ -22,11 +24,13 @@ export const Jane = ({ className, stroke = 1 }) => (
)
/**
* A linedrawing component for the front of Aaron
* A linedrawing component for the front of Jane
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const JaneFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 1052.0441 1204.9541" {...{ className }}>
@ -35,11 +39,13 @@ export const JaneFront = ({ className, stroke = 1 }) => (
)
/**
* A linedrawing component for the front of Aaron
* A linedrawing component for the back of Jane
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const JaneBack = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 1052.0441 1204.9541" {...{ className }}>
@ -50,7 +56,7 @@ export const JaneBack = ({ className, stroke = 1 }) => (
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="outline"

18
packages/react/components/LineDrawing/lucy.mjs
View file

@ -8,11 +8,13 @@ import { LineDrawingWrapper, regular } from './shared.mjs'
const strokeScale = 0.9
/**
* A linedrawing component for Hugo
* A linedrawing component for Lucy
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Lucy = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 -30 202 202" {...{ className }}>
@ -20,13 +22,21 @@ export const Lucy = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
// Front is the same
/**
* A linedrawing component for the front of Lucy
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const LucyFront = Lucy
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="outline"

20
packages/react/components/LineDrawing/lumina.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.7
/**
* A linedrawing component for Lumina
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Lumina = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 187 117" {...{ className, stroke }}>
@ -24,9 +26,11 @@ export const Lumina = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Lumina
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const LuminaFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-20 0 127 127" {...{ className, stroke }}>
@ -34,8 +38,14 @@ export const LuminaFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Lumina
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const LuminaBack = ({
className = 'w-64', // CSS classes to apply
@ -54,7 +64,7 @@ export const LuminaBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/lumira.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 1.2
/**
* A linedrawing component for Lumira
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Lumira = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 187 220" {...{ className, stroke }}>
@ -24,9 +26,11 @@ export const Lumira = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Lumira
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const LumiraFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-60 0 220 220" {...{ className, stroke }}>
@ -34,8 +38,14 @@ export const LumiraFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Lumira
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const LumiraBack = ({
className = 'w-64', // CSS classes to apply
@ -54,7 +64,7 @@ export const LumiraBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

16
packages/react/components/LineDrawing/lunetius.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 1.5
/**
* A linedrawing component for Lunetius
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Lunetius = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-60 0 294 294" {...{ className }}>
@ -20,13 +22,21 @@ export const Lunetius = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
// Front is the same
/**
* A linedrawing component for the front of Lunetius
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const LunetiusFront = Lunetius
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

4
packages/react/components/LineDrawing/missing.mjs
View file

@ -4,9 +4,11 @@ import { LineDrawingWrapper, regular } from './shared.mjs'
/**
* A linedrawing component for designs that do not (yet) have their own
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const MissingLinedrawing = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 100 100" {...{ className }}>

20
packages/react/components/LineDrawing/noble.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.4
/**
* A linedrawing component for Noble
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Noble = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 152 83" {...{ className, stroke }}>
@ -24,9 +26,11 @@ export const Noble = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Noble
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const NobleFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-5 0 83 83" {...{ className, stroke }}>
@ -34,8 +38,14 @@ export const NobleFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Noble
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const NobleBack = ({
className = 'w-64', // CSS classes to apply
@ -54,7 +64,7 @@ export const NobleBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

18
packages/react/components/LineDrawing/simon.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.15
/**
* A linedrawing component for Simon
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Simon = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 157 121" {...{ className, stroke }}>
@ -24,9 +26,11 @@ export const Simon = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Simon
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const SimonFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-20 0 122 122" {...{ className, stroke }}>
@ -34,8 +38,14 @@ export const SimonFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Simon
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const SimonBack = ({
className = 'w-64', // CSS classes to apply

20
packages/react/components/LineDrawing/teagan.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.5
/**
* A linedrawing component for Teagan
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Teagan = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 170 90" {...{ className }}>
@ -24,9 +26,11 @@ export const Teagan = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Teagan
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const TeaganFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-2 0 90 90" {...{ className }}>
@ -34,8 +38,14 @@ export const TeaganFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Teagan
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const TeaganBack = ({
className = 'w-64', // CSS classes to apply
@ -54,7 +64,7 @@ export const TeaganBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/tristan.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.5
/**
* A linedrawing component for Tristan
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Tristan = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 152 102" {...{ className }}>
@ -24,9 +26,11 @@ export const Tristan = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Tristan
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const TristanFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-15 0 102 102" {...{ className }}>
@ -34,8 +38,14 @@ export const TristanFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Tristan
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const TristanBack = ({
className = 'w-64', // CSS classes to apply
@ -54,7 +64,7 @@ export const TristanBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="folds"

20
packages/react/components/LineDrawing/uma.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.5
/**
* A linedrawing component for Uma
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Uma = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 221 75" {...{ className }}>
@ -24,9 +26,11 @@ export const Uma = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Uma
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const UmaFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 -15 105 105" {...{ className }}>
@ -34,8 +38,14 @@ export const UmaFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Uma
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const UmaBack = ({
className = 'w-64', // CSS classes to apply
@ -54,7 +64,7 @@ export const UmaBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

20
packages/react/components/LineDrawing/umbra.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.5
/**
* A linedrawing component for Umbra
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Umbra = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 221 75" {...{ className }}>
@ -24,9 +26,11 @@ export const Umbra = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Umbra
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const UmbraFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 -15 105 105" {...{ className }}>
@ -34,8 +38,14 @@ export const UmbraFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/*
* React component for the back
/**
* A linedrawing component for the back of Umbra
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const UmbraBack = ({
className = 'w-64', // CSS classes to apply
@ -54,7 +64,7 @@ export const UmbraBack = ({
/*
* SVG elements for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
<path
key="stitches"

19
packages/react/components/LineDrawing/wahid.mjs
View file

@ -10,9 +10,11 @@ const strokeScale = 0.5
/**
* A linedrawing component for Wahid
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const Wahid = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="0 0 162 126" {...{ className }}>
@ -24,9 +26,11 @@ export const Wahid = ({ className, stroke = 1 }) => (
/**
* A linedrawing component for the front of Wahid
*
* @param {object} props - All React props
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const WahidFront = ({ className, stroke = 1 }) => (
<LineDrawingWrapper viewBox="-20 0 126 126" {...{ className }}>
@ -34,6 +38,15 @@ export const WahidFront = ({ className, stroke = 1 }) => (
</LineDrawingWrapper>
)
/**
* A linedrawing component for the back of Wahid
*
* @component
* @param {object} props - All component props
* @param {string} props.className - Any CSS classes to apply
* @param {number} props.stroke - The stroke width to apply
* @returns {JSX.Element}
*/
export const WahidBack = ({
className = 'w-64', // CSS classes to apply
stroke = 1, // Stroke width to use
@ -68,7 +81,7 @@ const defs = (
/*
* React component for the front
*/
export const Front = ({ stroke }) => (
const Front = ({ stroke }) => (
<>
{defs}
<path

1
packages/react/mkdocs.sh
View file

@ -18,3 +18,4 @@ jsdoc -c jsdoc.json components/Input/* > ../../sites/dev/prebuild/jsdoc/react/co
jsdoc -c jsdoc.json components/Json/* > ../../sites/dev/prebuild/jsdoc/react/components/json.json
jsdoc -c jsdoc.json components/KeyVal/* > ../../sites/dev/prebuild/jsdoc/react/components/keyval.json
jsdoc -c jsdoc.json components/Layout/* > ../../sites/dev/prebuild/jsdoc/react/components/layout.json
jsdoc -c jsdoc.json components/LineDrawing/* > ../../sites/dev/prebuild/jsdoc/react/components/linedrawing.json