Skip to content

Commit

Permalink
Merge branch 'master' into play-1435-fix-darkmode-collapsible-kit
Browse files Browse the repository at this point in the history
  • Loading branch information
anthonymig88 authored Jul 25, 2024
2 parents f4f38fc + c8ee035 commit 42317d3
Show file tree
Hide file tree
Showing 84 changed files with 1,516 additions and 368 deletions.
4 changes: 4 additions & 0 deletions Dockerfile
Original file line number Diff line number Diff line change
Expand Up @@ -90,3 +90,7 @@ COPY --link --from=release /home/app/src/playbook-website/public /home/app/src/p
COPY --link --from=release /home/app/src/node_modules/@powerhome/playbook-icons/icons /home/app/src/temp-icons
RUN cp -r /home/app/src/temp-icons/* /home/app/src/playbook-website/app/javascript/images/
RUN rm -rf /home/app/src/temp-icons

COPY --link --from=release /home/app/src/node_modules/@powerhome/playbook-icons/aliases.json /home/app/src/aliases.json
RUN cp /home/app/src/aliases.json /home/app/src/playbook-website/app/javascript/aliases.json
RUN rm /home/app/src/aliases.json
2 changes: 1 addition & 1 deletion playbook-website/Gemfile.lock
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
PATH
remote: ../playbook
specs:
playbook_ui (13.32.0)
playbook_ui (13.33.1)
actionpack (>= 5.2.4.5)
actionview (>= 5.2.4.5)
activesupport (>= 5.2.4.5)
Expand Down
8 changes: 7 additions & 1 deletion playbook-website/app/controllers/pages_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -240,7 +240,12 @@ def set_category

def kit_categories
@category = params[:category]
aggregate_kits.find { |item| item["category"] == @category }["components"].map { |component| component["name"] }
components = aggregate_kits.find { |item| item["category"] == @category }["components"]
filter_kits_by_status(components, status: "beta").map { |component| component["name"] }
end

def filter_kits_by_status(components, status: nil)
components.reject { |component| status && component["status"] == status }
end

def set_kit
Expand Down Expand Up @@ -344,6 +349,7 @@ def handle_kit_collection(type)
@kits_array = @kits.first.split("&")
params[:name] ||= @kits_array[0]
@selected_kit = params[:name]
@variants = params[:variants].present? ? params[:variants].split("&") : []
@type = type

render template: "pages/kit_collection", layout: "layouts/fullscreen"
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,13 +3,16 @@ import React from 'react'
import {
Background,
Body,
Button,
Caption,
Flex,
Icon,
Title,
} from 'playbook-ui'

import Example from '../Templates/Example'

const BORDER_RADIUS_VALUES = [ "none", "xs", "sm", "md", "lg", "xl", "rounded" ]
const TOKENS = {
'Rounded': '$border_radius_rounded',
'Extra Large': '$border_radius_xl',
Expand All @@ -30,7 +33,7 @@ const DATASET = [
{ name: 'None', class: 'border_radius_none' },
]

const BorderRadius = ({ tokensExample }: { tokensExample: string }) => (
const BorderRadius = ({ example, tokensExample }: { example: string, tokensExample: string }) => (
<React.Fragment>
<Background
className="token-wrapper"
Expand All @@ -43,11 +46,34 @@ const BorderRadius = ({ tokensExample }: { tokensExample: string }) => (
text='Border Radius'
/>
<Body
marginBottom='lg'
marginBottom='xxs'
marginTop='xs'
text='We have very specific settings for border radius to keep the interface looking consistent and clean. If you ever need to access these to build new things here are examples for how to do that.'
/>
<Button
link="https://playbook.powerapp.cloud/kits/card/react#border-radius"
newWindow
padding="none"
tabIndex={0}
variant="link"
>
<Body
variant="link"
>
{'See this prop in action in our Card Kit'}
<Icon
fixedWidth
icon="angle-right"
/>
</Body>
</Button>
</Background>
<Example
example={example}
globalProps={{
borderRadius: BORDER_RADIUS_VALUES,
}}
/>
<Example
example={tokensExample}
tokens={TOKENS}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -60,7 +60,9 @@ const VisualGuidelines = ({
case "typography":
return <Typography example={examples.typography_tokens}/>;
case "border_radius":
return <BorderRadius tokensExample={examples.border_radius_tokens}/>;
return <BorderRadius example={examples.border_radius_jsx}
tokensExample={examples.border_radius_tokens}
/>;
case "display":
return <Display example={examples.display_in_use_jsx}/>;
case "cursor":
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,13 +6,14 @@ import { linkFormat } from "../../../../../utilities/website_sidebar_helper";
import "./styles.scss";

type CategoryTitleProps = {
name: string;
category: string;
};

export const CategoryTitle = ({ name }: CategoryTitleProps): React.ReactElement => {
export const CategoryTitle = ({ category }: CategoryTitleProps): React.ReactElement => {

return (
<Flex align="center" className="category-title" gap="xs" marginBottom="md">
<Title size={{ xs: 3, sm: 2, md: 2, lg: 2, xl: 2 }} tag="h1" text={linkFormat(name)} />
<Title size={{ xs: 3, sm: 2, md: 2, lg: 2, xl: 2 }} tag="h1" text={linkFormat(category)} />
<Icon className="icon mobile" icon="circle-arrow-right" size="sm" />
<Icon className="icon desktop" icon="circle-arrow-right" size="xl" />
</Flex>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@ interface ComponentTypes {
}

interface CategoryTypes {
name: string;
category: string;
description: string;
components: ComponentTypes[];
}

const sortByName = (a: ComponentTypes, b: ComponentTypes) =>
a.name.localeCompare(b.name);
const sortByName = (a: ComponentTypes, b: ComponentTypes): number => {
return a.name.localeCompare(b.name);
}

const sortComponentsByName = (kitCategory: CategoryTypes) => {
kitCategory.components.sort(sortByName);
Expand All @@ -22,8 +23,8 @@ const sortComponentsByName = (kitCategory: CategoryTypes) => {
export const ComponentsLoader: () => Promise<CategoryTypes[]> = async () => {
const response = await fetch("/beta/kits.json");
const data = await response.json();
data.kits.sort(sortByName).forEach(sortComponentsByName);

data.kits.forEach(sortComponentsByName);

return data;
};
Expand All @@ -40,9 +41,9 @@ export const CategoryLoader: (
const response = await fetch("/beta/kits.json");
const { kits } = await response.json();

const filteredData = kits.filter(
(kit: ComponentTypes) => kit.name === params.name
)[0];
const filteredData = kits.find(
(kit: CategoryTypes) => kit.category === params.category
);

filteredData.components.sort(sortByName);

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -13,13 +13,13 @@ import { Kit } from "../ComponentList"
import "./styles.scss"

export default function CategoryShow() {
const { components, name, description } = useLoaderData()
const { components, category, description } = useLoaderData()
const [kitsToShow, setKitsToShow] = useState(components)
const [platform, setPlatform] = useState('react')

return (
<>
<Hero description={description} title={linkFormat(name)} />
<Hero description={description} title={linkFormat(category)} />

<Flex
align="center"
Expand All @@ -39,7 +39,7 @@ export default function CategoryShow() {
<Body className="previous-route" color="light">Components</Body>
</NavLink>
<Icon className="category-breadcrumb-icon" icon="angle-right" />
<Body text={linkFormat(name)} />
<Body text={linkFormat(category)} />
</Flex>

{!kitsToShow.length && (
Expand All @@ -54,14 +54,17 @@ export default function CategoryShow() {
)}

<KitGrid>
{kitsToShow.map(({ description, name }: Kit, index: number) => (
<KitCard
description={description}
name={name}
key={`category-${name}-${index}`}
platform={platform}
/>
))}
{kitsToShow.filter(component => component.status === "stable")
.map(({ description, name }: Kit, index: number) => {
return(
<KitCard
description={description}
name={name}
key={`category-${name}-${index}`}
platform={platform}
/>
)
})}
</KitGrid>
</PageContainer>
</>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { PageContainer } from "../components/PageContainer"
import { CategoryTitle } from "../components/CategoryTitle"

export type Kit = {
name: string;
category: string;
components: {
name: string;
description: string;
Expand Down Expand Up @@ -65,14 +65,14 @@ export default function ComponentList() {
/>
</Flex>
) : (
kitsToShow.map(({ name, components }: Kit, index: number) => (
kitsToShow.map(({ category, components }: Kit, index: number) => (
<section
className="category mb_xl"
key={`${name}-${index}`}
id={name}
key={`${category}-${index}`}
id={category}
>
<NavLink to={`/beta/kit_category/${name}`}>
<CategoryTitle name={name} />
<NavLink to={`/beta/kit_category/${category}`}>
<CategoryTitle category={category} />
</NavLink>
<KitGrid>
{components
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -237,12 +237,54 @@ export default function IconList() {
</Flex>


<Flex
justify='center'
marginX={{ lg: "sm", xl: "sm" }}
paddingLeft="xs"
paddingTop="sm"
>
<FlexItem alignSelf='stretch' maxWidth='xxl' flexGrow={1}>
<Title paddingBottom="sm" size={3} tag='h3' text='Other Props' />
</FlexItem>
</Flex>
<Flex
justify='center'
marginX={{ lg: "sm", xl: "sm" }}
paddingLeft="xs"
>
<FlexItem alignSelf='stretch' maxWidth='xxl' flexGrow={1}>
<Flex>
<Card
marginRight='sm'
hover={{ shadow: "deeper" }}
cursor='pointer'
>
<Icon icon="roofing" size="2x" pull="left" />
</Card>
<Card
marginRight='sm'
hover={{ shadow: "deeper" }}
cursor='pointer'
>
<Icon icon="roofing" size="2x" pull="right" />
</Card>
<Card
marginRight='sm'
hover={{ shadow: "deeper" }}
cursor='pointer'
>
<Icon icon="roofing" size="2x" fixedWidth />
</Card>
</Flex>
</FlexItem>
</Flex>


<Flex
justify='center'
marginX={{ lg: "sm", xl: "sm" }}
paddingLeft="xs"
paddingTop="sm"
>
<FlexItem alignSelf='stretch' maxWidth='xxl' flexGrow={1}>
<Title paddingBottom="sm" size={3} tag='h3' text='Color' />
Expand Down
2 changes: 1 addition & 1 deletion playbook-website/app/javascript/packs/app.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ const router = createBrowserRouter(
<Route
element={<CategoryShow />}
loader={CategoryLoader}
path="kit_category/:name"
path="kit_category/:category"
/>
<Route
element={<IconList />}
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<Card borderRadius="md"> Card Content </Card>
6 changes: 3 additions & 3 deletions playbook-website/app/views/pages/kit_collection.html.erb
Original file line number Diff line number Diff line change
Expand Up @@ -2,16 +2,16 @@
<%= pb_rails("nav", props: { margin_bottom: "md", orientation: "horizontal" }) do %>
<%= pb_rails("flex", props: {wrap: true}) do %>
<% @kits_array.each do |kit| %>
<%= pb_rails("nav/item", props: { id: "nav-item-#{kit}", text: kit.titleize, link: kit_collection_show_path(names: params[:names], name: kit, type: @type), active: kit == @selected_kit}) %>
<%= pb_rails("nav/item", props: { id: "nav-item-#{kit}", text: kit.titleize, link: kit_collection_show_path(names: params[:names], name: kit, variants: params[:variants], type: @type), active: kit == @selected_kit}) %>
<% end %>
<% end %>
<% end %>
<div class="multi-kits-container">
<% if @type == "rails" %>
<%= pb_kit(kit: @selected_kit, dark_mode: dark_mode?) %>
<%= pb_kit(kit: @selected_kit, dark_mode: dark_mode?, variants: @variants) %>
<%= pb_rails("docs/kit_api", props: { kit: @selected_kit, dark: dark_mode? }) %>
<% elsif @type == "react" %>
<%= pb_kit(kit: @selected_kit, type: "react", dark_mode: dark_mode?) %>
<%= pb_kit(kit: @selected_kit, type: "react", dark_mode: dark_mode?, variants: @variants) %>
<% end %>
</div>
<% end %>
Loading

0 comments on commit 42317d3

Please sign in to comment.