diff --git a/src/design-system/atoms/branding/Branding.tsx b/src/design-system/atoms/branding/Branding.tsx index 34d97fb..5f32f08 100644 --- a/src/design-system/atoms/branding/Branding.tsx +++ b/src/design-system/atoms/branding/Branding.tsx @@ -1,94 +1,148 @@ import * as React from 'react'; import { palette } from 'roleypoly/src/design-system/atoms/colors'; -type LogoProps = { +export type LogoProps = { fill: string; width: number; height: number; circleFill: string; + circleOuterFill: string; typeFill: string; style: object; className: string; }; export const Logotype = ({ - fill = palette.taupe500, - width, - height, - circleFill = palette.taupe200, - typeFill, - style, - className, -}: Partial = {}) => ( + typeFill = palette.taupe400, + circleFill = palette.red200, + circleOuterFill = palette.green200, + ...props +}: Partial) => ( - + - - - - + + + + + + + + + - + + + + + + + + ); export const Logomark = ({ - fill = palette.taupe500, - width, - height, - circleFill = palette.taupe200, - typeFill, - style, - className, + circleFill = palette.red200, + circleOuterFill = palette.green200, + ...props }: Partial) => ( - - - - + + - - - - + + + + + + + ); diff --git a/src/design-system/atoms/branding/BrandingOld.tsx b/src/design-system/atoms/branding/BrandingOld.tsx new file mode 100644 index 0000000..2118661 --- /dev/null +++ b/src/design-system/atoms/branding/BrandingOld.tsx @@ -0,0 +1,85 @@ +import * as React from 'react'; +import { palette } from '../colors'; +import { LogoProps } from './Branding'; + +export const LogotypeOld = ({ + fill = palette.taupe500, + width, + height, + circleFill = palette.taupe200, + typeFill, + style, + className, +}: Partial = {}) => ( + + + + + + + + + + + + +); + +export const LogomarkOld = ({ + fill = palette.taupe500, + width, + height, + circleFill = palette.taupe200, + typeFill, + style, + className, +}: Partial) => ( + + + + + + + + + + + + +); diff --git a/src/design-system/atoms/branding/DynamicBranding.stories.tsx b/src/design-system/atoms/branding/DynamicBranding.stories.tsx new file mode 100644 index 0000000..b76aa60 --- /dev/null +++ b/src/design-system/atoms/branding/DynamicBranding.stories.tsx @@ -0,0 +1,49 @@ +import * as React from 'react'; +import styled from 'styled-components'; +import { AllVariants, DynamicLogomark, DynamicLogotype } from './DynamicBranding'; + +export default { + title: 'Atoms/Branding/Dynamic', + component: DynamicLogotype, +}; + +const Wrapper = styled.div` + background-color: black; + padding: 2em; +`; + +export const DynamicLogotype_ = (args) => { + return ( + + + + ); +}; + +export const DynamicLogomark_ = (args) => { + return ( + + + + ); +}; + +export const AllCustomizedLogotypes = () => { + return ( + + {AllVariants.map((variant, idx) => ( + + ))} + + ); +}; + +export const AllCustomizedLogomarks = () => { + return ( + + {AllVariants.map((variant, idx) => ( + + ))} + + ); +}; diff --git a/src/design-system/atoms/branding/DynamicBranding.tsx b/src/design-system/atoms/branding/DynamicBranding.tsx new file mode 100644 index 0000000..7d838df --- /dev/null +++ b/src/design-system/atoms/branding/DynamicBranding.tsx @@ -0,0 +1,187 @@ +import * as React from 'react'; +import { Logomark, LogoProps, Logotype } from './Branding'; + +type DynamicLogoProps = Partial & { + currentDate?: Date; +}; + +export const DynamicLogomark = (props: DynamicLogoProps) => { + const variant = React.useMemo(() => getRelevantVariant(props.currentDate), [ + props.currentDate, + ]); + + if (!variant) { + return ; + } + + return ; +}; + +export const DynamicLogotype = (props: DynamicLogoProps) => { + const variant = React.useMemo(() => getRelevantVariant(props.currentDate), [ + props.currentDate, + ]); + + if (!variant) { + return ; + } + + return ; +}; + +const getRelevantVariant = (currentDate?: Date) => { + for (let variant of AllVariants) { + if (variant.activeIf(currentDate)) return variant; + } + + return null; +}; + +// These should be updated for 2021. +// Please feel free to update with a PR for 2022 or any missing weeks within 2021. +// Rules: +// - common law holidays should have at least 2 extra days before and after +// - pride days should be 1 extra day before and after +// - weeks/months should have no buffer +// - 4/20 is just for 4/20. + +const matchDay = ( + start: Date, + end: Date, + currentDate: Date = new Date(), + staticDate: boolean = false +) => { + if (!staticDate) { + // pre-fill start/end years to simplify + start.setFullYear(currentDate.getFullYear()); + end.setFullYear(currentDate.getFullYear()); + } + + start.setHours(0, 0, 0, 0); + end.setHours(0, 0, 0, 0); + + if (currentDate > start && currentDate < end) { + return true; + } + + return false; +}; + +type Variant = { + activeIf: (currentDate?: Date) => boolean; + Logomark: React.FunctionComponent; + Logotype: React.FunctionComponent; +}; + +export const Trans: Variant = { + // March 31, Nov 13-20+1 + activeIf: (currentDate?: Date) => + matchDay(new Date('2021-Mar-31'), new Date('2021-Apr-1'), currentDate) || + matchDay(new Date('2021-Nov-13'), new Date('2021-Nov-21'), currentDate), + Logomark: (props: DynamicLogoProps) => <>, + Logotype: (props: DynamicLogoProps) => <>, +}; + +export const Pride: Variant = { + // June + activeIf: (currentDate?: Date) => + matchDay(new Date('2021-Jun-1'), new Date('2021-Jul-1'), currentDate), + Logomark: (props: DynamicLogoProps) => <>, + Logotype: (props: DynamicLogoProps) => <>, +}; + +export const Bi: Variant = { + // Sept 16-23 + activeIf: (currentDate?: Date) => + matchDay(new Date('2021-Sep-16'), new Date('2021-Sep-24'), currentDate), + Logomark: (props: DynamicLogoProps) => <>, + Logotype: (props: DynamicLogoProps) => <>, +}; + +export const Lesbian: Variant = { + // Apr 26 + activeIf: (currentDate?: Date) => + matchDay(new Date('2021-Apr-25'), new Date('2021-Apt-27'), currentDate), + Logomark: (props: DynamicLogoProps) => <>, + Logotype: (props: DynamicLogoProps) => <>, +}; + +export const Ace: Variant = { + // Oct 24-30 + activeIf: (currentDate?: Date) => + matchDay(new Date('2021-Oct-24'), new Date('2021-Oct-31'), currentDate), + Logomark: (props: DynamicLogoProps) => <>, + Logotype: (props: DynamicLogoProps) => <>, +}; + +export const Birthday: Variant = { + // Jan 15 + activeIf: (currentDate?: Date) => + matchDay(new Date('2021-Jan-15'), new Date('2021-Jan-16'), currentDate), + Logomark: (props: DynamicLogoProps) => <>, + Logotype: (props: DynamicLogoProps) => <>, +}; + +export const DevilsLettuce: Variant = { + // Apr 20 + activeIf: (currentDate?: Date) => + matchDay(new Date('2021-Apr-20'), new Date('2021-Apr-21'), currentDate), + Logomark: (props: DynamicLogoProps) => ( + <> + + + ), + Logotype: (props: DynamicLogoProps) => ( + <> + + + ), +}; + +export const BicycleDay: Variant = { + // Apr 19 + activeIf: (currentDate?: Date) => + matchDay(new Date('2021-Apr-19'), new Date('2021-Apr-20'), currentDate), + Logomark: (props: DynamicLogoProps) => <>, + Logotype: (props: DynamicLogoProps) => <>, +}; + +export const Christmas: Variant = { + // Dec 20-27 + activeIf: (currentDate?: Date) => + matchDay(new Date('2021-Dec-20'), new Date('2021-Dec-28'), currentDate), + Logomark: (props: DynamicLogoProps) => <>, + Logotype: (props: DynamicLogoProps) => <>, +}; + +export const NewYear: Variant = { + // Dec 30 - Jan 2 + activeIf: (currentDate?: Date) => + matchDay(new Date('2021-Dec-30'), new Date('2021-Jan-3'), currentDate), + Logomark: (props: DynamicLogoProps) => <>, + Logotype: (props: DynamicLogoProps) => <>, +}; + +export const LunarNewYear: Variant = { + // Feb 12, 2021 + // Feb 1, 2022 + activeIf: (currentDate?: Date) => + matchDay(new Date('2021-Feb-10'), new Date('2021-Feb-13'), currentDate, true) || + matchDay(new Date('2022-Jan-30'), new Date('2022-Feb-3'), currentDate, true), + Logomark: (props: DynamicLogoProps) => <>, + Logotype: (props: DynamicLogoProps) => <>, +}; + +export const AllVariants: Variant[] = [ + Trans, + Pride, + Bi, + Lesbian, + Ace, + Birthday, + DevilsLettuce, + BicycleDay, + Christmas, + NewYear, + LunarNewYear, +]; diff --git a/src/design-system/atoms/branding/index.ts b/src/design-system/atoms/branding/index.ts index e983d1e..8ccce70 100644 --- a/src/design-system/atoms/branding/index.ts +++ b/src/design-system/atoms/branding/index.ts @@ -1 +1,2 @@ export * from './Branding'; +export * from './DynamicBranding'; diff --git a/src/design-system/atoms/colors/colors.tsx b/src/design-system/atoms/colors/colors.tsx index a1ab54f..0ae45ff 100644 --- a/src/design-system/atoms/colors/colors.tsx +++ b/src/design-system/atoms/colors/colors.tsx @@ -16,8 +16,10 @@ export const palette = { discord500: '#99AAB5', green400: '#46B646', + green200: '#1D8227', red400: '#E95353', + red200: '#F14343', gold400: '#EFCF24',