diff --git a/packages/design-system/atoms/breakpoints/BreakpointText.tsx b/packages/design-system/atoms/breakpoints/BreakpointText.tsx new file mode 100644 index 0000000..a04a01b --- /dev/null +++ b/packages/design-system/atoms/breakpoints/BreakpointText.tsx @@ -0,0 +1,26 @@ +import styled, { css } from 'styled-components'; +import { onSmallScreen } from './Breakpoints'; + +const ShowOnSmall = styled.span` + display: none; + ${onSmallScreen(css` + display: initial; + `)} +`; + +const ShowOnLarge = styled.span` + display: initial; + ${onSmallScreen(css` + display: none; + `)} +`; + +export const BreakpointText = (props: { small: string; large: string }) => { + const { small, large } = props; + return ( + <> + {small} + {large} + + ); +}; diff --git a/packages/design-system/atoms/breakpoints/index.ts b/packages/design-system/atoms/breakpoints/index.ts index d72bd04..fea0bcd 100644 --- a/packages/design-system/atoms/breakpoints/index.ts +++ b/packages/design-system/atoms/breakpoints/index.ts @@ -1,3 +1,4 @@ export * from './BreakpointProvider'; export * from './Breakpoints'; +export * from './BreakpointText'; export * from './Context'; diff --git a/packages/design-system/atoms/button/Button.styled.ts b/packages/design-system/atoms/button/Button.styled.ts index 26d3247..49819ea 100644 --- a/packages/design-system/atoms/button/Button.styled.ts +++ b/packages/design-system/atoms/button/Button.styled.ts @@ -67,6 +67,13 @@ const colors = { background-color: ${palette.taupe200}; } `, + silent: css` + background: none; + border-color: transparent; + :hover { + background-color: ${palette.taupe200}; + } + `, }; const sizes = { diff --git a/packages/design-system/organisms/editor-shell/EditorShell.tsx b/packages/design-system/organisms/editor-shell/EditorShell.tsx index 67d8c2c..231a2e7 100644 --- a/packages/design-system/organisms/editor-shell/EditorShell.tsx +++ b/packages/design-system/organisms/editor-shell/EditorShell.tsx @@ -1,10 +1,16 @@ import { Space } from '@roleypoly/design-system/atoms/space'; -import { Tab, TabView } from '@roleypoly/design-system/atoms/tab-view'; -import { EditorMasthead } from '@roleypoly/design-system/molecules/editor-masthead'; -import { EditorCategoriesTab } from '@roleypoly/design-system/organisms/editor-categories-tab'; -import { EditorDetailsTab } from '@roleypoly/design-system/organisms/editor-details-tab'; -import { Category, PresentableGuild } from '@roleypoly/types'; +import { PickerCategory } from '@roleypoly/design-system/molecules/picker-category'; +import { ServerMasthead } from '@roleypoly/design-system/molecules/server-masthead'; +import { SecondaryEditing } from '@roleypoly/design-system/organisms/masthead'; +import { + CategoryContainer, + Container, + MessageBox, +} from '@roleypoly/design-system/organisms/role-picker/RolePicker.styled'; +import { ReactifyNewlines } from '@roleypoly/misc-utils/ReactifyNewlines'; +import { Category, CategoryType, PresentableGuild, Role } from '@roleypoly/types'; import deepEqual from 'deep-equal'; +import { sortBy } from 'lodash'; import React from 'react'; export type EditorShellProps = { @@ -43,39 +49,39 @@ export const EditorShell = (props: EditorShellProps) => { ); return ( -
- - props.onGuildChange?.(guild)} - showSaveReset={hasChanges} - /> - } - > - - {() => ( - - )} - - - {() => ( - - )} - - {() =>
hi2!
}
-
-
+ <> + + + + + + + + {props.guild.data.message} + + + +
+ {sortBy(props.guild.data.categories, 'position').map((category, idx) => ( + + props.guild.roles.find((r) => r.id === role)) + .filter((r) => r !== undefined) as Role[] + } + onChange={() => () => {}} + wikiMode={false} + type={category.type === CategoryType.Single ? 'single' : 'multi'} + /> + + ))} +
+
+ ); }; diff --git a/packages/design-system/organisms/masthead/Masthead.stories.tsx b/packages/design-system/organisms/masthead/Masthead.stories.tsx index 146cd3c..025ff7d 100644 --- a/packages/design-system/organisms/masthead/Masthead.stories.tsx +++ b/packages/design-system/organisms/masthead/Masthead.stories.tsx @@ -2,6 +2,7 @@ import * as React from 'react'; import { guild, mastheadSlugs, user } from '../../fixtures/storyData'; import { Authed } from './Authed'; import { Guest } from './Guest'; +import { SecondaryEditing } from './Secondary'; import { Skeleton } from './Skeleton'; export default { @@ -12,6 +13,18 @@ export const hasGuilds = () => ( ); +export const withSecondary = () => ( + <> + + + +); + export const noGuilds = () => ( ); diff --git a/packages/design-system/organisms/masthead/Masthead.styled.tsx b/packages/design-system/organisms/masthead/Masthead.styled.tsx index 1304081..02bb321 100644 --- a/packages/design-system/organisms/masthead/Masthead.styled.tsx +++ b/packages/design-system/organisms/masthead/Masthead.styled.tsx @@ -91,3 +91,29 @@ export const GuildPopoverHead = styled.div` `)} } `; + +export const SecondaryBase = styled(MastheadBase)` + top: 50px; + background-color: ${palette.taupe300}; + z-index: 99; + padding: 0 15px; + box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2); +`; + +export const IconHolder = styled.div` + width: 30px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 2px; + border: 2px solid ${palette.taupe200}; + background-color: ${palette.taupe100}; + margin-right: 1em; +`; + +export const TextHolder = styled.div` + display: flex; + align-items: center; + justify-content: center; +`; diff --git a/packages/design-system/organisms/masthead/Secondary.tsx b/packages/design-system/organisms/masthead/Secondary.tsx new file mode 100644 index 0000000..d113e06 --- /dev/null +++ b/packages/design-system/organisms/masthead/Secondary.tsx @@ -0,0 +1,44 @@ +import { BreakpointText } from '@roleypoly/design-system/atoms/breakpoints'; +import { Button } from '@roleypoly/design-system/atoms/button'; +import { FaderOpacity } from '@roleypoly/design-system/atoms/fader'; +import { GuildSlug } from '@roleypoly/types'; +import { GoCheck, GoPencil } from 'react-icons/go'; +import { + IconHolder, + MastheadAlignment, + MastheadLeft, + MastheadRight, + SecondaryBase, + TextHolder, +} from './Masthead.styled'; + +type SecondaryEditingProps = { + guild: GuildSlug; + showReset: boolean; +}; + +export const SecondaryEditing = (props: SecondaryEditingProps) => ( + + + + + + + + + + + + + + +    + + + + +); diff --git a/packages/design-system/organisms/masthead/index.ts b/packages/design-system/organisms/masthead/index.ts index 2fcce1b..373bde8 100644 --- a/packages/design-system/organisms/masthead/index.ts +++ b/packages/design-system/organisms/masthead/index.ts @@ -1,3 +1,4 @@ export * from './Authed'; export * from './Guest'; +export * from './Secondary'; export * from './Skeleton';