Skip to content

Commit

Permalink
feat: rework wordings and display
Browse files Browse the repository at this point in the history
  • Loading branch information
@maximedasilva
maximedasilva committed Sep 27, 2024
1 parent 5335e05 commit e2772aa
Show file tree
Hide file tree
Showing 5 changed files with 156 additions and 187 deletions.
22 changes: 18 additions & 4 deletions packages/react/lib/Element/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -158,10 +158,24 @@ const Element = forwardRef<ElementRef, ElementProps>(({
'oak-gap-2 oak-justify-between'
)}
>
<h6 className="junipero oak-m-0">
<Text>{ component?.name as string }</Text>
</h6>
{ rendered && (
<div>
<h6 className="junipero oak-inline oak-m-0">
<Text>{ component?.name as string }</Text>
</h6>
{ element.collapsed && (
<span
className={classNames(
'junipero extra',
'!oak-text-alternate-text-color oak-ml-1'
)}
>
<Text name="core.components.collapsed">
(expand to see inner content)
</Text>
</span>
)}
</div>
{ !element.collapsed && rendered && (
<div className="element-content oak-flex-auto">
{ rendered }
</div>
Expand Down
83 changes: 34 additions & 49 deletions packages/react/lib/components/Clickable/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,59 +54,44 @@ const Clickable = ({

return (
<>
{ element.collapsed
? (
<div
{ ...omit(rest, ['builder', 'component']) }
className={classNames(
'wrapper',
depth % 2 === 0 ? 'even' : 'odd',
className,
)}
>
<Text name="core.components.clickable.collapsed">
Collapsed clickable (expand to see inner content)
</Text>
</div>
) : (
<div
{ ...omit(rest, ['builder']) }
className={classNames(
'wrapper',
depth % 2 === 0 ? 'even' : 'odd',
className,
)}
data-depth={depth}
>
<Droppable onDrop={onDropElement.bind(null, 'before')}>
<div className="drop-zone before" />
</Droppable>
<div className="sections oak-flex oak-flex-col oak-gap-4 oak-p-4">
<div className="section">
<div
className={classNames(
'title junipero secondary',
'!oak-text-alternate-text-color'
)}
>
<Text name="core.components.clickable.sectionsTitle.content">
{ !element.collapsed && (
<div
{ ...omit(rest, ['builder']) }
className={classNames(
'wrapper',
depth % 2 === 0 ? 'even' : 'odd',
className,
)}
data-depth={depth}
>
<Droppable onDrop={onDropElement.bind(null, 'before')}>
<div className="drop-zone before" />
</Droppable>
<div className="sections oak-flex oak-flex-col oak-gap-4 oak-p-4">
<div className="section">
<div
className={classNames(
'title junipero secondary',
'!oak-text-alternate-text-color'
)}
>
<Text name="core.components.clickable.sectionsTitle.content">
Clickable content
</Text>
</div>
<Container
depth={depth + 1}
element={element}
content={element.content as ElementObject[]}
component={component}
/>
</Text>
</div>
<Container
depth={depth + 1}
element={element}
content={element.content as ElementObject[]}
component={component}
/>
</div>
<Droppable onDrop={onDropElement.bind(null, 'after')}>
<div className="drop-zone after" />
</Droppable>
</div>
)
}
<Droppable onDrop={onDropElement.bind(null, 'after')}>
<div className="drop-zone after" />
</Droppable>
</div>
)}
</>
);
};
Expand Down
148 changes: 66 additions & 82 deletions packages/react/lib/components/Foldable/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -54,96 +54,80 @@ const Foldable = ({

return (
<>
{ element.collapsed
? (
<div
{ ...omit(rest, ['builder', 'component']) }
className={classNames(
'wrapper',
depth % 2 === 0 ? 'even' : 'odd',
className,
)}
>
<Text name="core.components.foldable.collapsed">
Collapsed foldable (expand to see inner content)
</Text>
</div>
)
: (
<div
{ ...omit(rest, ['builder']) }
className={classNames(
'wrapper',
depth % 2 === 0 ? 'even' : 'odd',
className,
)}
data-depth={depth}
>
<Droppable onDrop={onDropElement.bind(null, 'before')}>
<div className="drop-zone before" />
</Droppable>
<div className="sections oak-flex oak-flex-col oak-gap-4 oak-p-4">
<div className="section">
<div
className={classNames(
'title junipero secondary',
'!oak-text-alternate-text-color'
)}
>
<Text name="core.components.foldable.sectionsTitle.seeMore">
{ !element.collapsed && (
<div
{ ...omit(rest, ['builder']) }
className={classNames(
'wrapper',
depth % 2 === 0 ? 'even' : 'odd',
className,
)}
data-depth={depth}
>
<Droppable onDrop={onDropElement.bind(null, 'before')}>
<div className="drop-zone before" />
</Droppable>
<div className="sections oak-flex oak-flex-col oak-gap-4 oak-p-4">
<div className="section">
<div
className={classNames(
'title junipero secondary',
'!oak-text-alternate-text-color'
)}
>
<Text name="core.components.foldable.sectionsTitle.seeMore">
Label when collapsed
</Text>
</div>
<Container
depth={depth + 1}
element={element}
content={element.seeMore}
component={component}
/>
</Text>
</div>
<div className="section">
<div
className={classNames(
'title junipero secondary',
'!oak-text-alternate-text-color'
)}
>
<Text name="core.components.foldable.sectionsTitle.seeLess">
<Container
depth={depth + 1}
element={element}
content={element.seeMore}
component={component}
/>
</div>
<div className="section">
<div
className={classNames(
'title junipero secondary',
'!oak-text-alternate-text-color'
)}
>
<Text name="core.components.foldable.sectionsTitle.seeLess">
Label when expanded
</Text>
</div>
<Container
depth={depth + 1}
element={element}
content={element.seeLess}
component={component}
/>
</Text>
</div>
<div className="section">
<div
className={classNames(
'title junipero secondary',
'!oak-text-alternate-text-color'
)}
>
<Text name="core.components.foldable.sectionsTitle.content">
<Container
depth={depth + 1}
element={element}
content={element.seeLess}
component={component}
/>
</div>
<div className="section">
<div
className={classNames(
'title junipero secondary',
'!oak-text-alternate-text-color'
)}
>
<Text name="core.components.foldable.sectionsTitle.content">
Content
</Text>
</div>
<Container
depth={depth + 1}
element={element}
content={element.content as ElementObject[]}
component={component}
/>
</Text>
</div>
<Container
depth={depth + 1}
element={element}
content={element.content as ElementObject[]}
component={component}
/>
</div>
<Droppable onDrop={onDropElement.bind(null, 'after')}>
<div className="drop-zone after" />
</Droppable>
</div>
)
}
<Droppable onDrop={onDropElement.bind(null, 'after')}>
<div className="drop-zone after" />
</Droppable>
</div>
)}
</>
);
};
Expand Down
88 changes: 37 additions & 51 deletions packages/react/lib/components/Row/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -91,62 +91,48 @@ const Row = ({

return (
<>
{ element.collapsed
? (
{ !element.collapsed && (
<div
{ ...omit(rest, ['builder', 'component']) }
className={classNames(
'wrapper',
depth % 2 === 0 ? 'even' : 'odd',
className,
)}
>
<Droppable onDrop={onDropElement.bind(null, 'before')}>
<div className="drop-zone before" />
</Droppable>
<div
{ ...omit(rest, ['builder', 'component']) }
className={classNames(
'wrapper',
depth % 2 === 0 ? 'even' : 'odd',
className,
)}
>
<Text name="core.components.row.collapsed">
Collapsed row (expand to see inner content)
</Text>
</div>
) : (
<div
{ ...omit(rest, ['builder', 'component']) }
className={classNames(
'wrapper',
depth % 2 === 0 ? 'even' : 'odd',
className,
)}
>
<Droppable onDrop={onDropElement.bind(null, 'before')}>
<div className="drop-zone before" />
</Droppable>
<div
className={classNames(
'row-content oak-flex oak-flex-wrap oak-w-full oak-gap-2',
element.settings?.flexDirection &&
'row-content oak-flex oak-flex-wrap oak-w-full oak-gap-2',
element.settings?.flexDirection &&
'oak-flex-' + element.settings.flexDirection,
element.settings?.alignItems
? 'oak-items-' + element.settings.alignItems
: /col/.test(element.settings?.flexDirection)
? 'oak-items-stretch' : 'oak-items-start',
element.settings?.justifyContent &&
element.settings?.alignItems
? 'oak-items-' + element.settings.alignItems
: /col/.test(element.settings?.flexDirection)
? 'oak-items-stretch' : 'oak-items-start',
element.settings?.justifyContent &&
'oak-justify-' + element.settings.justifyContent,
)}
>
{ element?.cols?.map((col: ElementObject, i: Key) => (
<Col
key={i}
depth={depth}
element={col}
parent={element.cols}
onPrepend={onDivide.bind(null, i, true)}
onAppend={onDivide.bind(null, i, false)}
onRemove={onRemoveCol.bind(null, i)}
/>
)) }
</div>
<Droppable onDrop={onDropElement.bind(null, 'after')}>
<div className="drop-zone after" />
</Droppable>
)}
>
{ element?.cols?.map((col: ElementObject, i: Key) => (
<Col
key={i}
depth={depth}
element={col}
parent={element.cols}
onPrepend={onDivide.bind(null, i, true)}
onAppend={onDivide.bind(null, i, false)}
onRemove={onRemoveCol.bind(null, i)}
/>
)) }
</div>
)}
<Droppable onDrop={onDropElement.bind(null, 'after')}>
<div className="drop-zone after" />
</Droppable>
</div>
)}
</>
);
};
Expand Down
2 changes: 1 addition & 1 deletion packages/react/lib/options.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ export const collapseOption = (): ReactComponentOptionObject => ({
name={(
<Text
name={`core.tooltips.expand.${collapsed ? 'more' : 'less'}`}
default={collapsed ? 'Expand more' : 'Expand less'}
default={collapsed ? 'Expand' : 'Collapse'}
/>
)}
/>
Expand Down

0 comments on commit e2772aa

Please sign in to comment.