fix #75

.storybook/storybook.css

@@ -136,7 +136,6 @@ button.sidebar-item.sidebar-item ~ div > a {
     @mixin background-opacity var(--pa-color-primary-brightest), 0.25;
     color: var(--pa-color-primary-darkest);
     padding: 0.25rem;
-    justify-content: center;
 
     &.is-highlighted {
       @mixin background-opacity var(--pa-color-primary-brightest), 0.8;

src/elements/layout/column/column.css

@@ -32,6 +32,12 @@
   margin-right: var(--pa-grid-gutter-horizontal);
   margin-top: var(--pa-grid-gutter-vertical);
 
+  &--centered {
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+  }
+
   @each $breakpoint in var(--internal-breakpoints) {
     @each $value in var(--internal-columns) {
       @mixin breakpoint-modifier $breakpoint, $value {

src/elements/layout/column/column.lite.tsx

@@ -9,6 +9,7 @@ export default function Column(props: ColumnProps) {
   const state = useStore<ColumnState>({
     get classes() {
       return columnService.getClasses(
+        props.centered || false,
         props.basic,
         props.xxs,
         props.xs,

src/elements/layout/column/column.model.ts

@@ -1,8 +1,8 @@
 import type { BaseProps, BaseState, BreakpointProps } from '~/models';
 
-export type ColumnProps = BreakpointProps<
-  1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'content' | 'fill' | 'hide'
-> &
+export type ColumnProps = {
+  centered?: boolean;
+} & BreakpointProps<1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'content' | 'fill' | 'hide'> &
   BaseProps;
 
 export type ColumnState = {

src/elements/layout/column/column.service.ts

@@ -2,6 +2,7 @@ import { classesToString, getBreakpointClasses } from '~/helpers';
 
 class ColumnService {
   public getClasses(
+    centered: boolean,
     basic: number | string,
     xxs: number | string,
     xs: number | string,
@@ -14,6 +15,7 @@ class ColumnService {
   ) {
     const base = classesToString([
       'pa-column',
+      [centered, `pa-column--centered`],
       getBreakpointClasses(basic, xxs, xs, s, m, l, xl, xxl, 'pa-column--'),
       className || ''
     ]);

src/elements/layout/column/column.stories.mdx

@@ -8,6 +8,14 @@ import { Customization, Codesandbox } from '../../../../.storybook/components';
   title="🧩Elements/Layout/Column"
   component={Column}
   argTypes={{
+    centered: {
+      name: 'centered',
+      description: 'Let the content to be centered',
+      table: {},
+      control: {
+        type: 'boolean'
+      }
+    },
     ...getBreakpointArgTypes('Column size in {breakpoint}', [
       1,
       2,
@@ -44,12 +52,17 @@ export const Template = (args) => (
 
 Columns are layout elements that will be essential to create grids, they work very well if being children of rows, but can work also alone.
 
-The size of a column can be different for each breakpoint: `xs`, `s`, `m`, `l`, `xl` and `xxl` and the supported sizes are: `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, `content`, `fill` and `hide`.
+The size of a column can be different for each breakpoint: `xs`, `s`, `m`, `l`, `xl` and `xxl` and the supported sizes are: `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, `content`, `fill` and `hide`, if you want to center the content you can set `centered` to `true`.
 
 ## Showcase
 
 <Canvas>
-  <Story name="Column" args={{}}>
+  <Story
+    name="Column"
+    args={{
+      centered: false
+    }}
+  >
     {Template.bind({})}
   </Story>
 </Canvas>

src/elements/layout/container/container.css

@@ -4,6 +4,13 @@
   width: 100%;
   max-width: var(--pa-grid-max-width);
 
+  &--centered {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+  }
+
   &--fluid {
     max-width: 100%;
   }

src/elements/layout/container/container.lite.tsx

@@ -8,7 +8,7 @@ useMetadata({ isAttachedToShadowDom: true });
 export default function Container(props: ContainerProps) {
   const state = useStore<ContainerState>({
     get classes() {
-      return containerService.getClasses(props.fluid, props.className || props.classList);
+      return containerService.getClasses(props.centered || false, props.fluid, props.className || props.classList);
     }
   });
 

src/elements/layout/container/container.model.ts

@@ -2,6 +2,7 @@ import type { BaseProps, BaseState } from '~/models';
 
 export type ContainerProps = {
   fluid?: boolean;
+  centered?: boolean;
 } & BaseProps;
 
 export type ContainerState = {

src/elements/layout/container/container.service.ts

@@ -1,8 +1,13 @@
 import { classesToString } from '~/helpers';
 
 class ContainerService {
-  public getClasses(fluid: boolean, className: string) {
-    const base = classesToString(['pa-container', [fluid, 'pa-container--fluid'], className || '']);
+  public getClasses(centered: boolean, fluid: boolean, className: string) {
+    const base = classesToString([
+      'pa-container',
+      [centered, `pa-column--centered`],
+      [fluid, 'pa-container--fluid'],
+      className || ''
+    ]);
 
     return { base };
   }

src/elements/layout/container/container.stories.mdx

@@ -7,6 +7,14 @@ import { Customization, Codesandbox } from '../../../../.storybook/components';
   title="🧩Elements/Layout/Container"
   component={Container}
   argTypes={{
+    centered: {
+      name: 'centered',
+      description: 'Let the content to be centered',
+      table: {},
+      control: {
+        type: 'boolean'
+      }
+    },
     fluid: {
       name: 'fluid',
       description: 'Let the container grow to max',
@@ -22,15 +30,16 @@ export const Template = (args) => <Container {...args}>Container</Container>;
 
 # Container
 
-Containers are the most simple element from layout category, are use to contain any other elements as wrapper and will adapt its width to `--pa-grid-container-max-width` or can be adapted to `100%` using `fluid` property.
+Containers are the most simple element from layout category, are use to contain any other elements as wrapper and will adapt its width to `--pa-grid-container-max-width` or can be adapted to `100%` using `fluid` property, if you want to center the content you can set `centered` to `true`.
 
 ## Showcase
 
 <Canvas>
   <Story
     name="Container"
     args={{
-      fluid: false
+      fluid: false,
+      centered: false
     }}
   >
     {Template.bind({})}

src/elements/layout/row/row.lite.tsx

@@ -1,4 +1,4 @@
-import { Show, useMetadata, useStore } from '@builder.io/mitosis';
+import { useMetadata, useStore } from '@builder.io/mitosis';
 import './row.css';
 import type { RowProps, RowState } from './row.model';
 import { rowService } from './row.service';
@@ -22,9 +22,5 @@ export default function Row(props: RowProps) {
     }
   });
 
-  return (
-    <Show when={state.loaded}>
-      <div class={state.classes.base}>{props.children}</div>
-    </Show>
-  );
+  return <div class={state.classes.base}>{props.children}</div>;
 }