diff --git a/sites/shared/components/designs/linedrawings/benjamin.mjs b/sites/shared/components/designs/linedrawings/benjamin.mjs new file mode 100644 index 00000000000..663eda366a2 --- /dev/null +++ b/sites/shared/components/designs/linedrawings/benjamin.mjs @@ -0,0 +1,51 @@ +import { LineDrawingWrapper } from './shared.mjs' + +const strokeScale = 0.5 + +export const Benjamin = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the front + */ +export const BenjaminFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + +) diff --git a/sites/shared/components/designs/linedrawings/bent.mjs b/sites/shared/components/designs/linedrawings/bent.mjs new file mode 100644 index 00000000000..e3a40f1a82d --- /dev/null +++ b/sites/shared/components/designs/linedrawings/bent.mjs @@ -0,0 +1,98 @@ +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Bent = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const BentFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const BentBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + + +) diff --git a/sites/shared/components/designs/linedrawings/bob.mjs b/sites/shared/components/designs/linedrawings/bob.mjs new file mode 100644 index 00000000000..a7cc9de29f4 --- /dev/null +++ b/sites/shared/components/designs/linedrawings/bob.mjs @@ -0,0 +1,88 @@ +import { LineDrawingWrapper, thin, dashed } from './shared.mjs' + +const strokeScale = 0.5 + +export const Bob = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + + ) +} + +/* + * React component for the front + */ +export const BobFront = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * React component for the back + */ +export const BobBack = ({ + className = 'w-64', // CSS classes to apply + stroke = 1, // Stroke width to use +}) => { + // Normalize stroke across designs + stroke = stroke * strokeScale + + return ( + + + + ) +} + +/* + * SVG elements for the front + */ +export const Front = ({ stroke }) => ( + <> + + + +) + +/* + * SVG elements for the back + */ +const Back = ({ stroke }) => ( + <> + + + +) diff --git a/sites/shared/components/designs/linedrawings/index.mjs b/sites/shared/components/designs/linedrawings/index.mjs index bb1b3e441d8..927a1862ccb 100644 --- a/sites/shared/components/designs/linedrawings/index.mjs +++ b/sites/shared/components/designs/linedrawings/index.mjs @@ -1,6 +1,9 @@ import { Aaron, AaronFront, AaronBack } from 'shared/components/designs/linedrawings/aaron.mjs' import { Albert, AlbertFront } from 'shared/components/designs/linedrawings/albert.mjs' import { Bella, BellaFront, BellaBack } from 'shared/components/designs/linedrawings/bella.mjs' +import { Benjamin, BenjaminFront } from 'shared/components/designs/linedrawings/benjamin.mjs' +import { Bent, BentFront, BentBack } from 'shared/components/designs/linedrawings/bent.mjs' +import { Bob, BobFront, BobBack } from 'shared/components/designs/linedrawings/bob.mjs' import { Bruce, BruceFront, BruceBack } from 'shared/components/designs/linedrawings/bruce.mjs' import { Simon, SimonFront, SimonBack } from 'shared/components/designs/linedrawings/simon.mjs' import { Wahid, WahidFront, WahidBack } from 'shared/components/designs/linedrawings/wahid.mjs' @@ -9,6 +12,9 @@ export const lineDrawingsFront = { aaron: AaronFront, albert: AlbertFront, bella: BellaFront, + benjamin: BenjaminFront, + bent: BentFront, + bob: BobFront, bruce: BruceFront, simon: SimonFront, wahid: WahidFront, @@ -17,6 +23,8 @@ export const lineDrawingsFront = { export const lineDrawingsBack = { aaron: AaronBack, bella: BellaBack, + bent: BentBack, + bob: BobBack, bruce: BruceBack, simon: SimonBack, wahid: WahidBack, @@ -26,6 +34,9 @@ export const lineDrawings = { aaron: Aaron, albert: Albert, bella: Bella, + benjamin: Benjamin, + bent: Bent, + bob: Bob, bruce: Bruce, simon: Simon, wahid: Wahid,